@lobehub/ui 5.38.0 → 5.39.1

package/es/base-ui/Accordion/style.mjs

@@ -1,3 +1,4 @@
+import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/Accordion/style.ts
@@ -144,10 +145,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     background: none;
     outline: none;
 
-    &:focus-visible {
-      outline: 2px solid ${cssVar.colorPrimaryBorder};
-      outline-offset: -2px;
-    }
+    ${focusRing};
 
     &[data-disabled] {
       cursor: not-allowed;

package/es/base-ui/Accordion/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Accordion/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    display: flex;\n    flex-shrink: 0;\n    gap: 4px;\n    align-items: center;\n\n    opacity: 0;\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n  `,\n  actionAlwaysVisible: css`\n    opacity: 1;\n  `,\n  actionBorderless: css`\n    padding-inline-end: var(--accordion-hover-inset, 8px);\n  `,\n  actionOutlined: css`\n    padding-inline-end: 16px;\n  `,\n  content: css`\n    font-size: 14px;\n    line-height: 1.6;\n  `,\n  contentBorderless: css`\n    padding-block: 0 12px;\n  `,\n  contentIndent: css`\n    padding-inline-start: 24px;\n  `,\n  contentIndentOutlined: css`\n    padding-inline-start: 40px;\n  `,\n  contentOutlined: css`\n    padding-block: 0 14px;\n    padding-inline: 16px;\n  `,\n  header: css`\n    position: relative;\n\n    display: flex;\n    align-items: center;\n\n    margin: 0;\n\n    font-size: inherit;\n    font-weight: inherit;\n\n    transition: background 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not(:has([data-disabled])) {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:hover .accordion-action,\n    &:focus-within .accordion-action {\n      opacity: 1;\n    }\n  `,\n  headerBorderless: css`\n    margin-inline: calc(var(--accordion-hover-inset, 8px) * -1);\n    border-radius: ${cssVar.borderRadius};\n  `,\n  indicator: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n\n    color: ${cssVar.colorTextDescription};\n\n    transition: transform 200ms ${cssVar.motionEaseOut};\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  indicatorEnd: css`\n    margin-inline-start: auto;\n\n    [data-panel-open] & {\n      transform: rotate(180deg);\n    }\n  `,\n  indicatorStart: css`\n    [data-panel-open] & {\n      transform: rotate(90deg);\n    }\n  `,\n  item: css`\n    display: flex;\n    flex-direction: column;\n  `,\n  itemOutlined: css`\n    & + & {\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    }\n  `,\n  panel: css`\n    overflow: hidden;\n    height: var(--accordion-panel-height);\n    transition: height 200ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      height: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  `,\n  rootOutlined: css`\n    overflow: hidden;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n  trigger: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    flex: 1;\n    gap: 8px;\n    align-items: center;\n\n    min-width: 0;\n    border: 0;\n    border-radius: inherit;\n\n    font: inherit;\n    font-size: 14px;\n    font-weight: 500;\n    color: ${cssVar.colorText};\n    text-align: start;\n\n    background: none;\n    outline: none;\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n  `,\n  triggerBorderless: css`\n    padding-block: 8px;\n    padding-inline: var(--accordion-hover-inset, 8px);\n  `,\n  triggerOutlined: css`\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: null,\n      outlined: styles.rootOutlined,\n    },\n  },\n});\n\nexport const itemVariants = cva(styles.item, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: null,\n      outlined: styles.itemOutlined,\n    },\n  },\n});\n\nexport const headerVariants = cva(styles.header, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: styles.headerBorderless,\n      outlined: null,\n    },\n  },\n});\n\nexport const triggerVariants = cva(styles.trigger, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: styles.triggerBorderless,\n      outlined: styles.triggerOutlined,\n    },\n  },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n  defaultVariants: { placement: 'start' },\n  variants: {\n    placement: {\n      end: styles.indicatorEnd,\n      start: styles.indicatorStart,\n    },\n  },\n});\n\nexport const contentVariants = cva(styles.content, {\n  compoundVariants: [\n    {\n      class: styles.contentIndent,\n      indent: true,\n      variant: 'borderless',\n    },\n    {\n      class: styles.contentIndentOutlined,\n      indent: true,\n      variant: 'outlined',\n    },\n  ],\n  defaultVariants: { indent: true, variant: 'borderless' },\n  variants: {\n    indent: {\n      false: null,\n      true: null,\n    },\n    variant: {\n      borderless: styles.contentBorderless,\n      outlined: styles.contentOutlined,\n    },\n  },\n});\n\nexport const actionVariants = cva(styles.action, {\n  defaultVariants: { alwaysVisible: false, variant: 'borderless' },\n  variants: {\n    alwaysVisible: {\n      false: null,\n      true: styles.actionAlwaysVisible,\n    },\n    variant: {\n      borderless: styles.actionBorderless,\n      outlined: styles.actionOutlined,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;gCAQmB,OAAO,cAAc;;CAEnD,qBAAqB,GAAG;;;CAGxB,kBAAkB,GAAG;;;CAGrB,gBAAgB,GAAG;;;CAGnB,SAAS,GAAG;;;;CAIZ,mBAAmB,GAAG;;;CAGtB,eAAe,GAAG;;;CAGlB,uBAAuB,GAAG;;;CAG1B,iBAAiB,GAAG;;;;CAIpB,QAAQ,GAAG;;;;;;;;;;;mCAWsB,OAAO,cAAc;;;oBAGpC,OAAO,kBAAkB;;;;;;;;CAQ3C,kBAAkB,GAAG;;qBAEF,OAAO,aAAa;;CAEvC,WAAW,GAAG;;;;;aAKH,OAAO,qBAAqB;;kCAEP,OAAO,cAAc;;;;;;CAMrD,cAAc,GAAG;;;;;;;CAOjB,gBAAgB,GAAG;;;;;CAKnB,MAAM,GAAG;;;;CAIT,cAAc,GAAG;;sCAEmB,OAAO,qBAAqB;;;CAGhE,OAAO,GAAG;;;+BAGmB,OAAO,cAAc;;;;;;;;;;;CAWlD,MAAM,GAAG;;;;;CAKT,cAAc,GAAG;;wBAEK,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;CAEzC,SAAS,GAAG;;;;;;;;;;;;;;;;aAgBD,OAAO,UAAU;;;;;;;2BAOH,OAAO,mBAAmB;;;;;;eAMtC,OAAO,kBAAkB;;;CAGtC,mBAAmB,GAAG;;;;CAItB,iBAAiB,GAAG;;;;AAItB,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY;EACZ,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY;EACZ,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,UAAU;CACZ,EACF;AACF,CAAC;AAED,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EAAE,WAAW,QAAQ;CACtC,UAAU,EACR,WAAW;EACT,KAAK,OAAO;EACZ,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,kBAAkB,CAChB;EACE,OAAO,OAAO;EACd,QAAQ;EACR,SAAS;CACX,GACA;EACE,OAAO,OAAO;EACd,QAAQ;EACR,SAAS;CACX,CACF;CACA,iBAAiB;EAAE,QAAQ;EAAM,SAAS;CAAa;CACvD,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,YAAY,OAAO;GACnB,UAAU,OAAO;EACnB;CACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB;EAAE,eAAe;EAAO,SAAS;CAAa;CAC/D,UAAU;EACR,eAAe;GACb,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,YAAY,OAAO;GACnB,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Accordion/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    display: flex;\n    flex-shrink: 0;\n    gap: 4px;\n    align-items: center;\n\n    opacity: 0;\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n  `,\n  actionAlwaysVisible: css`\n    opacity: 1;\n  `,\n  actionBorderless: css`\n    padding-inline-end: var(--accordion-hover-inset, 8px);\n  `,\n  actionOutlined: css`\n    padding-inline-end: 16px;\n  `,\n  content: css`\n    font-size: 14px;\n    line-height: 1.6;\n  `,\n  contentBorderless: css`\n    padding-block: 0 12px;\n  `,\n  contentIndent: css`\n    padding-inline-start: 24px;\n  `,\n  contentIndentOutlined: css`\n    padding-inline-start: 40px;\n  `,\n  contentOutlined: css`\n    padding-block: 0 14px;\n    padding-inline: 16px;\n  `,\n  header: css`\n    position: relative;\n\n    display: flex;\n    align-items: center;\n\n    margin: 0;\n\n    font-size: inherit;\n    font-weight: inherit;\n\n    transition: background 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not(:has([data-disabled])) {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:hover .accordion-action,\n    &:focus-within .accordion-action {\n      opacity: 1;\n    }\n  `,\n  headerBorderless: css`\n    margin-inline: calc(var(--accordion-hover-inset, 8px) * -1);\n    border-radius: ${cssVar.borderRadius};\n  `,\n  indicator: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n\n    color: ${cssVar.colorTextDescription};\n\n    transition: transform 200ms ${cssVar.motionEaseOut};\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  indicatorEnd: css`\n    margin-inline-start: auto;\n\n    [data-panel-open] & {\n      transform: rotate(180deg);\n    }\n  `,\n  indicatorStart: css`\n    [data-panel-open] & {\n      transform: rotate(90deg);\n    }\n  `,\n  item: css`\n    display: flex;\n    flex-direction: column;\n  `,\n  itemOutlined: css`\n    & + & {\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    }\n  `,\n  panel: css`\n    overflow: hidden;\n    height: var(--accordion-panel-height);\n    transition: height 200ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      height: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  `,\n  rootOutlined: css`\n    overflow: hidden;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n  trigger: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    flex: 1;\n    gap: 8px;\n    align-items: center;\n\n    min-width: 0;\n    border: 0;\n    border-radius: inherit;\n\n    font: inherit;\n    font-size: 14px;\n    font-weight: 500;\n    color: ${cssVar.colorText};\n    text-align: start;\n\n    background: none;\n    outline: none;\n\n    ${focusRing};\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n  `,\n  triggerBorderless: css`\n    padding-block: 8px;\n    padding-inline: var(--accordion-hover-inset, 8px);\n  `,\n  triggerOutlined: css`\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: null,\n      outlined: styles.rootOutlined,\n    },\n  },\n});\n\nexport const itemVariants = cva(styles.item, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: null,\n      outlined: styles.itemOutlined,\n    },\n  },\n});\n\nexport const headerVariants = cva(styles.header, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: styles.headerBorderless,\n      outlined: null,\n    },\n  },\n});\n\nexport const triggerVariants = cva(styles.trigger, {\n  defaultVariants: { variant: 'borderless' },\n  variants: {\n    variant: {\n      borderless: styles.triggerBorderless,\n      outlined: styles.triggerOutlined,\n    },\n  },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n  defaultVariants: { placement: 'start' },\n  variants: {\n    placement: {\n      end: styles.indicatorEnd,\n      start: styles.indicatorStart,\n    },\n  },\n});\n\nexport const contentVariants = cva(styles.content, {\n  compoundVariants: [\n    {\n      class: styles.contentIndent,\n      indent: true,\n      variant: 'borderless',\n    },\n    {\n      class: styles.contentIndentOutlined,\n      indent: true,\n      variant: 'outlined',\n    },\n  ],\n  defaultVariants: { indent: true, variant: 'borderless' },\n  variants: {\n    indent: {\n      false: null,\n      true: null,\n    },\n    variant: {\n      borderless: styles.contentBorderless,\n      outlined: styles.contentOutlined,\n    },\n  },\n});\n\nexport const actionVariants = cva(styles.action, {\n  defaultVariants: { alwaysVisible: false, variant: 'borderless' },\n  variants: {\n    alwaysVisible: {\n      false: null,\n      true: styles.actionAlwaysVisible,\n    },\n    variant: {\n      borderless: styles.actionBorderless,\n      outlined: styles.actionOutlined,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;gCAQmB,OAAO,cAAc;;CAEnD,qBAAqB,GAAG;;;CAGxB,kBAAkB,GAAG;;;CAGrB,gBAAgB,GAAG;;;CAGnB,SAAS,GAAG;;;;CAIZ,mBAAmB,GAAG;;;CAGtB,eAAe,GAAG;;;CAGlB,uBAAuB,GAAG;;;CAG1B,iBAAiB,GAAG;;;;CAIpB,QAAQ,GAAG;;;;;;;;;;;mCAWsB,OAAO,cAAc;;;oBAGpC,OAAO,kBAAkB;;;;;;;;CAQ3C,kBAAkB,GAAG;;qBAEF,OAAO,aAAa;;CAEvC,WAAW,GAAG;;;;;aAKH,OAAO,qBAAqB;;kCAEP,OAAO,cAAc;;;;;;CAMrD,cAAc,GAAG;;;;;;;CAOjB,gBAAgB,GAAG;;;;;CAKnB,MAAM,GAAG;;;;CAIT,cAAc,GAAG;;sCAEmB,OAAO,qBAAqB;;;CAGhE,OAAO,GAAG;;;+BAGmB,OAAO,cAAc;;;;;;;;;;;CAWlD,MAAM,GAAG;;;;;CAKT,cAAc,GAAG;;wBAEK,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;CAEzC,SAAS,GAAG;;;;;;;;;;;;;;;;aAgBD,OAAO,UAAU;;;;;;MAMxB,UAAU;;;;eAID,OAAO,kBAAkB;;;CAGtC,mBAAmB,GAAG;;;;CAItB,iBAAiB,GAAG;;;;AAItB,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY;EACZ,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY;EACZ,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,UAAU;CACZ,EACF;AACF,CAAC;AAED,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EAAE,WAAW,QAAQ;CACtC,UAAU,EACR,WAAW;EACT,KAAK,OAAO;EACZ,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,kBAAkB,CAChB;EACE,OAAO,OAAO;EACd,QAAQ;EACR,SAAS;CACX,GACA;EACE,OAAO,OAAO;EACd,QAAQ;EACR,SAAS;CACX,CACF;CACA,iBAAiB;EAAE,QAAQ;EAAM,SAAS;CAAa;CACvD,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,YAAY,OAAO;GACnB,UAAU,OAAO;EACnB;CACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB;EAAE,eAAe;EAAO,SAAS;CAAa;CAC/D,UAAU;EACR,eAAe;GACb,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,YAAY,OAAO;GACnB,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}

package/es/base-ui/Alert/style.mjs

@@ -1,4 +1,5 @@
 import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/Alert/style.ts
@@ -59,10 +60,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       scale: 0.96;
     }
 
-    &:focus-visible {
-      outline: 2px solid ${cssVar.colorPrimaryBorder};
-      outline-offset: 1px;
-    }
+    ${focusRing};
 
     &:disabled {
       cursor: not-allowed;
@@ -156,10 +154,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       background: ${cssVar.colorFillQuaternary};
     }
 
-    &:focus-visible {
-      outline: 2px solid ${cssVar.colorPrimaryBorder};
-      outline-offset: -2px;
-    }
+    ${focusRing};
   `,
 	extraHeaderPlain: css`
     margin-block-start: 6px;

package/es/base-ui/Alert/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Alert/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n\n    min-height: 32px;\n    margin-inline-start: auto;\n  `,\n  close: css`\n    cursor: pointer;\n\n    position: relative;\n    scale: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    margin: 0;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition:\n      color 160ms ${cssVar.motionEaseOut},\n      background-color 160ms ${cssVar.motionEaseOut},\n      scale 160ms ${cssVar.motionEaseOut};\n\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-start: 50%;\n      translate: -50% -50%;\n\n      width: 40px;\n      height: 40px;\n    }\n\n    &:hover:not(:disabled) {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active:not(:disabled) {\n      scale: 0.96;\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.45;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  colorfulText: css`\n    color: var(--lobe-alert-accent);\n  `,\n  container: css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-width: 100%;\n  `,\n  content: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  `,\n  description: css`\n    font-size: 13px;\n    line-height: 20px;\n    color: ${cssVar.colorTextSecondary};\n    text-wrap: pretty;\n    overflow-wrap: anywhere;\n  `,\n  detailed: css`\n    padding-block: 12px;\n    padding-inline: 14px;\n  `,\n  extra: css`\n    position: relative;\n    max-width: 100%;\n    color: ${cssVar.colorText};\n  `,\n  extraBanner: css`\n    border-radius: 0;\n  `,\n  extraContent: css`\n    overflow: hidden;\n\n    margin-block: 0 12px;\n    margin-inline: 12px;\n    padding: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillQuaternary};\n  `,\n  extraHeader: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    gap: 6px;\n    align-items: center;\n\n    min-height: 40px;\n    padding-block: 8px;\n    padding-inline: 14px;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 0;\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 20px;\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    transition:\n      color 160ms ${cssVar.motionEaseOut},\n      background-color 160ms ${cssVar.motionEaseOut};\n\n    &::marker,\n    &::-webkit-details-marker {\n      content: '';\n      display: none;\n    }\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillQuaternary};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n  `,\n  extraHeaderPlain: css`\n    margin-block-start: 6px;\n    padding-inline: 0;\n    border-block-start-color: ${cssVar.colorBorderSecondary};\n  `,\n  extraIndicator: css`\n    flex-shrink: 0;\n    color: ${cssVar.colorTextTertiary};\n    transition: transform 160ms ${cssVar.motionEaseOut};\n\n    details[open] > summary > & {\n      transform: rotate(90deg);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  extraPlain: css`\n    background: transparent;\n  `,\n  icon: css`\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    height: 20px;\n\n    color: var(--lobe-alert-accent);\n  `,\n  integrated: css`\n    overflow: hidden;\n    border-radius: ${cssVar.borderRadius};\n  `,\n  neutralText: css`\n    color: ${cssVar.colorText};\n  `,\n  root: css`\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: flex-start;\n\n    box-sizing: border-box;\n    width: 100%;\n    max-width: 100%;\n    padding-block: 10px;\n    padding-inline: 12px;\n    border: none;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: 14px;\n    color: ${cssVar.colorText};\n\n    background: var(--lobe-alert-background);\n    box-shadow: inset 0 0 0 1px var(--lobe-alert-soft-border);\n\n    @media (width <= 480px) {\n      flex-wrap: wrap;\n    }\n  `,\n  soft: css`\n    background: var(--lobe-alert-background);\n    box-shadow: inset 0 0 0 1px var(--lobe-alert-soft-border);\n  `,\n  outlined: css`\n    background: transparent;\n    box-shadow: inset 0 0 0 1px ${cssVar.colorBorderSecondary};\n  `,\n  plain: css`\n    padding-block: 2px;\n    padding-inline: 0;\n    background: transparent;\n    box-shadow: none;\n  `,\n  title: css`\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    color: inherit;\n    text-wrap: pretty;\n    overflow-wrap: anywhere;\n  `,\n  titleDetailed: css`\n    font-weight: 500;\n  `,\n  toneError: css`\n    --lobe-alert-accent: ${cssVar.colorError};\n    --lobe-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorError} 5%,\n      ${cssVar.colorBgContainer}\n    );\n    --lobe-alert-soft-border: color-mix(in srgb, ${cssVar.colorError} 14%, transparent);\n  `,\n  toneInfo: css`\n    --lobe-alert-accent: ${cssVar.colorInfo};\n    --lobe-alert-background: color-mix(in srgb, ${cssVar.colorInfo} 5%, ${cssVar.colorBgContainer});\n    --lobe-alert-soft-border: color-mix(in srgb, ${cssVar.colorInfo} 14%, transparent);\n  `,\n  toneSecondary: css`\n    --lobe-alert-accent: ${cssVar.colorTextSecondary};\n    --lobe-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorTextSecondary} 4%,\n      ${cssVar.colorBgContainer}\n    );\n    --lobe-alert-soft-border: color-mix(in srgb, ${cssVar.colorTextSecondary} 12%, transparent);\n  `,\n  toneSuccess: css`\n    --lobe-alert-accent: ${cssVar.colorSuccess};\n    --lobe-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorSuccess} 5%,\n      ${cssVar.colorBgContainer}\n    );\n    --lobe-alert-soft-border: color-mix(in srgb, ${cssVar.colorSuccess} 14%, transparent);\n  `,\n  toneWarning: css`\n    --lobe-alert-accent: ${cssVar.colorWarning};\n    --lobe-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorWarning} 5%,\n      ${cssVar.colorBgContainer}\n    );\n    --lobe-alert-soft-border: color-mix(in srgb, ${cssVar.colorWarning} 14%, transparent);\n  `,\n  unifiedRoot: css`\n    border-radius: 0;\n    background: transparent;\n    box-shadow: none;\n  `,\n  banner: css`\n    border-radius: 0;\n    box-shadow: none;\n  `,\n  wrappedAction: css`\n    @media (width <= 480px) {\n      order: 4;\n      width: calc(100% - 30px);\n      margin-block-start: -2px;\n      margin-inline-start: 30px;\n    }\n  `,\n}));\n\nexport const toneVariants = cva('', {\n  defaultVariants: { type: 'info' },\n  variants: {\n    type: {\n      error: styles.toneError,\n      info: styles.toneInfo,\n      secondary: styles.toneSecondary,\n      success: styles.toneSuccess,\n      warning: styles.toneWarning,\n    },\n  },\n});\n\nexport const rootVariants = cva(styles.root, {\n  compoundVariants: [{ class: styles.unifiedRoot, hasExtra: true }],\n  defaultVariants: {\n    banner: false,\n    colorfulText: false,\n    glass: false,\n    hasDescription: false,\n    hasExtra: false,\n    variant: 'soft',\n  },\n  variants: {\n    banner: { false: null, true: styles.banner },\n    colorfulText: { false: styles.neutralText, true: styles.colorfulText },\n    glass: { false: null, true: lobeStaticStylish.blur },\n    hasDescription: { false: null, true: styles.detailed },\n    hasExtra: { false: null, true: null },\n    variant: {\n      borderless: styles.plain,\n      filled: styles.soft,\n      outlined: styles.outlined,\n      plain: styles.plain,\n      soft: styles.soft,\n    },\n  },\n});\n\nexport const integratedVariants = cva(styles.integrated, {\n  defaultVariants: { banner: false, glass: false, variant: 'soft' },\n  variants: {\n    banner: { false: null, true: styles.banner },\n    glass: { false: null, true: lobeStaticStylish.blur },\n    variant: {\n      borderless: styles.extraPlain,\n      filled: styles.soft,\n      outlined: styles.outlined,\n      plain: styles.extraPlain,\n      soft: styles.soft,\n    },\n  },\n});\n\nexport const extraVariants = cva(styles.extra, {\n  defaultVariants: { banner: false, variant: 'soft' },\n  variants: {\n    banner: { false: null, true: styles.extraBanner },\n    variant: {\n      borderless: styles.extraPlain,\n      filled: null,\n      outlined: null,\n      plain: styles.extraPlain,\n      soft: null,\n    },\n  },\n});\n\nexport const extraHeaderVariants = cva(styles.extraHeader, {\n  defaultVariants: { variant: 'soft' },\n  variants: {\n    variant: {\n      borderless: styles.extraHeaderPlain,\n      filled: null,\n      outlined: null,\n      plain: styles.extraHeaderPlain,\n      soft: null,\n    },\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Alert/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n\n    min-height: 32px;\n    margin-inline-start: auto;\n  `,\n  close: css`\n    cursor: pointer;\n\n    position: relative;\n    scale: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    margin: 0;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition:\n      color 160ms ${cssVar.motionEaseOut},\n      background-color 160ms ${cssVar.motionEaseOut},\n      scale 160ms ${cssVar.motionEaseOut};\n\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-start: 50%;\n      translate: -50% -50%;\n\n      width: 40px;\n      height: 40px;\n    }\n\n    &:hover:not(:disabled) {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active:not(:disabled) {\n      scale: 0.96;\n    }\n\n    ${focusRing};\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.45;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  colorfulText: css`\n    color: var(--lobe-alert-accent);\n  `,\n  container: css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-width: 100%;\n  `,\n  content: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  `,\n  description: css`\n    font-size: 13px;\n    line-height: 20px;\n    color: ${cssVar.colorTextSecondary};\n    text-wrap: pretty;\n    overflow-wrap: anywhere;\n  `,\n  detailed: css`\n    padding-block: 12px;\n    padding-inline: 14px;\n  `,\n  extra: css`\n    position: relative;\n    max-width: 100%;\n    color: ${cssVar.colorText};\n  `,\n  extraBanner: css`\n    border-radius: 0;\n  `,\n  extraContent: css`\n    overflow: hidden;\n\n    margin-block: 0 12px;\n    margin-inline: 12px;\n    padding: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillQuaternary};\n  `,\n  extraHeader: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    gap: 6px;\n    align-items: center;\n\n    min-height: 40px;\n    padding-block: 8px;\n    padding-inline: 14px;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 0;\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 20px;\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    transition:\n      color 160ms ${cssVar.motionEaseOut},\n      background-color 160ms ${cssVar.motionEaseOut};\n\n    &::marker,\n    &::-webkit-details-marker {\n      content: '';\n      display: none;\n    }\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillQuaternary};\n    }\n\n    ${focusRing};\n  `,\n  extraHeaderPlain: css`\n    margin-block-start: 6px;\n    padding-inline: 0;\n    border-block-start-color: ${cssVar.colorBorderSecondary};\n  `,\n  extraIndicator: css`\n    flex-shrink: 0;\n    color: ${cssVar.colorTextTertiary};\n    transition: transform 160ms ${cssVar.motionEaseOut};\n\n    details[open] > summary > & {\n      transform: rotate(90deg);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  extraPlain: css`\n    background: transparent;\n  `,\n  icon: css`\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    height: 20px;\n\n    color: var(--lobe-alert-accent);\n  `,\n  integrated: css`\n    overflow: hidden;\n    border-radius: ${cssVar.borderRadius};\n  `,\n  neutralText: css`\n    color: ${cssVar.colorText};\n  `,\n  root: css`\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: flex-start;\n\n    box-sizing: border-box;\n    width: 100%;\n    max-width: 100%;\n    padding-block: 10px;\n    padding-inline: 12px;\n    border: none;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: 14px;\n    color: ${cssVar.colorText};\n\n    background: var(--lobe-alert-background);\n    box-shadow: inset 0 0 0 1px var(--lobe-alert-soft-border);\n\n    @media (width <= 480px) {\n      flex-wrap: wrap;\n    }\n  `,\n  soft: css`\n    background: var(--lobe-alert-background);\n    box-shadow: inset 0 0 0 1px var(--lobe-alert-soft-border);\n  `,\n  outlined: css`\n    background: transparent;\n    box-shadow: inset 0 0 0 1px ${cssVar.colorBorderSecondary};\n  `,\n  plain: css`\n    padding-block: 2px;\n    padding-inline: 0;\n    background: transparent;\n    box-shadow: none;\n  `,\n  title: css`\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    color: inherit;\n    text-wrap: pretty;\n    overflow-wrap: anywhere;\n  `,\n  titleDetailed: css`\n    font-weight: 500;\n  `,\n  toneError: css`\n    --lobe-alert-accent: ${cssVar.colorError};\n    --lobe-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorError} 5%,\n      ${cssVar.colorBgContainer}\n    );\n    --lobe-alert-soft-border: color-mix(in srgb, ${cssVar.colorError} 14%, transparent);\n  `,\n  toneInfo: css`\n    --lobe-alert-accent: ${cssVar.colorInfo};\n    --lobe-alert-background: color-mix(in srgb, ${cssVar.colorInfo} 5%, ${cssVar.colorBgContainer});\n    --lobe-alert-soft-border: color-mix(in srgb, ${cssVar.colorInfo} 14%, transparent);\n  `,\n  toneSecondary: css`\n    --lobe-alert-accent: ${cssVar.colorTextSecondary};\n    --lobe-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorTextSecondary} 4%,\n      ${cssVar.colorBgContainer}\n    );\n    --lobe-alert-soft-border: color-mix(in srgb, ${cssVar.colorTextSecondary} 12%, transparent);\n  `,\n  toneSuccess: css`\n    --lobe-alert-accent: ${cssVar.colorSuccess};\n    --lobe-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorSuccess} 5%,\n      ${cssVar.colorBgContainer}\n    );\n    --lobe-alert-soft-border: color-mix(in srgb, ${cssVar.colorSuccess} 14%, transparent);\n  `,\n  toneWarning: css`\n    --lobe-alert-accent: ${cssVar.colorWarning};\n    --lobe-alert-background: color-mix(\n      in srgb,\n      ${cssVar.colorWarning} 5%,\n      ${cssVar.colorBgContainer}\n    );\n    --lobe-alert-soft-border: color-mix(in srgb, ${cssVar.colorWarning} 14%, transparent);\n  `,\n  unifiedRoot: css`\n    border-radius: 0;\n    background: transparent;\n    box-shadow: none;\n  `,\n  banner: css`\n    border-radius: 0;\n    box-shadow: none;\n  `,\n  wrappedAction: css`\n    @media (width <= 480px) {\n      order: 4;\n      width: calc(100% - 30px);\n      margin-block-start: -2px;\n      margin-inline-start: 30px;\n    }\n  `,\n}));\n\nexport const toneVariants = cva('', {\n  defaultVariants: { type: 'info' },\n  variants: {\n    type: {\n      error: styles.toneError,\n      info: styles.toneInfo,\n      secondary: styles.toneSecondary,\n      success: styles.toneSuccess,\n      warning: styles.toneWarning,\n    },\n  },\n});\n\nexport const rootVariants = cva(styles.root, {\n  compoundVariants: [{ class: styles.unifiedRoot, hasExtra: true }],\n  defaultVariants: {\n    banner: false,\n    colorfulText: false,\n    glass: false,\n    hasDescription: false,\n    hasExtra: false,\n    variant: 'soft',\n  },\n  variants: {\n    banner: { false: null, true: styles.banner },\n    colorfulText: { false: styles.neutralText, true: styles.colorfulText },\n    glass: { false: null, true: lobeStaticStylish.blur },\n    hasDescription: { false: null, true: styles.detailed },\n    hasExtra: { false: null, true: null },\n    variant: {\n      borderless: styles.plain,\n      filled: styles.soft,\n      outlined: styles.outlined,\n      plain: styles.plain,\n      soft: styles.soft,\n    },\n  },\n});\n\nexport const integratedVariants = cva(styles.integrated, {\n  defaultVariants: { banner: false, glass: false, variant: 'soft' },\n  variants: {\n    banner: { false: null, true: styles.banner },\n    glass: { false: null, true: lobeStaticStylish.blur },\n    variant: {\n      borderless: styles.extraPlain,\n      filled: styles.soft,\n      outlined: styles.outlined,\n      plain: styles.extraPlain,\n      soft: styles.soft,\n    },\n  },\n});\n\nexport const extraVariants = cva(styles.extra, {\n  defaultVariants: { banner: false, variant: 'soft' },\n  variants: {\n    banner: { false: null, true: styles.extraBanner },\n    variant: {\n      borderless: styles.extraPlain,\n      filled: null,\n      outlined: null,\n      plain: styles.extraPlain,\n      soft: null,\n    },\n  },\n});\n\nexport const extraHeaderVariants = cva(styles.extraHeader, {\n  defaultVariants: { variant: 'soft' },\n  variants: {\n    variant: {\n      borderless: styles.extraHeaderPlain,\n      filled: null,\n      outlined: null,\n      plain: styles.extraHeaderPlain,\n      soft: null,\n    },\n  },\n});\n"],"mappings":"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"}

package/es/base-ui/Button/style.mjs

@@ -1,4 +1,5 @@
 import { controlHeight } from "../controlSize.mjs";
+import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 //#region src/base-ui/Button/style.ts
 const buttonPaddingInline = {
@@ -31,10 +32,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),
       box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1);
 
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};
-    }
+    ${focusRing};
 
     &:disabled,
     &[aria-disabled='true'] {

package/es/base-ui/Button/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Button/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { controlHeight } from '@/base-ui/controlSize';\n\nexport const buttonPaddingInline = {\n  large: 16,\n  middle: 14,\n  small: 8,\n} as const;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  base: css`\n    cursor: pointer;\n\n    position: relative;\n\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 1px solid ${cssVar.colorBorder};\n\n    font-weight: 500;\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n\n    transition:\n      color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      background 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n    }\n\n    &:disabled,\n    &[aria-disabled='true'] {\n      pointer-events: none;\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n\n  sizeSmall: css`\n    --button-padding-inline: ${buttonPaddingInline.small}px;\n\n    height: ${controlHeight.small}px;\n    padding-inline: var(--button-padding-inline);\n    border-radius: ${cssVar.borderRadiusSM};\n    font-size: 12px;\n  `,\n\n  sizeMiddle: css`\n    --button-padding-inline: ${buttonPaddingInline.middle}px;\n\n    height: ${controlHeight.middle}px;\n    padding-inline: var(--button-padding-inline);\n    border-radius: ${cssVar.borderRadiusSM};\n    font-size: 13px;\n  `,\n\n  sizeLarge: css`\n    --button-padding-inline: ${buttonPaddingInline.large}px;\n\n    height: ${controlHeight.large}px;\n    padding-inline: var(--button-padding-inline);\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n\n  outdentStart: css`\n    margin-inline-start: calc(var(--button-padding-inline) * -1);\n  `,\n\n  outdentEnd: css`\n    margin-inline-end: calc(var(--button-padding-inline) * -1);\n  `,\n\n  shapeCircle: css`\n    padding-inline: 0;\n    border-radius: 50%;\n  `,\n\n  shapeRound: css`\n    border-radius: 999px;\n  `,\n\n  block: css`\n    width: 100%;\n  `,\n\n  iconEnd: css`\n    flex-direction: row-reverse;\n  `,\n\n  iconOnlySmall: css`\n    --button-padding-inline: 0px;\n\n    width: 24px;\n    padding-inline: 0;\n  `,\n\n  iconOnlyMiddle: css`\n    --button-padding-inline: 0px;\n\n    width: 32px;\n    padding-inline: 0;\n  `,\n\n  iconOnlyLarge: css`\n    --button-padding-inline: 0px;\n\n    width: 40px;\n    padding-inline: 0;\n  `,\n\n  iconBox: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  spinnerSlot: css`\n    overflow: hidden;\n\n    width: 0;\n    margin-inline-end: -6px;\n\n    opacity: 0;\n\n    transition:\n      width 380ms cubic-bezier(0.22, 1, 0.36, 1),\n      margin 380ms cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);\n  `,\n\n  spinnerSlotEnd: css`\n    margin-inline: -6px 0;\n  `,\n\n  spinnerSlotShow: css`\n    width: 12px;\n    margin-inline: 0;\n    opacity: 1;\n  `,\n\n  variantDefault: css`\n    background: ${cssVar.colorBgContainer};\n\n    /* &:hover/&:active included so the anchor form outranks antd's global a:hover/a:active link color */\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n    }\n  `,\n\n  variantPrimary: css`\n    border-color: ${cssVar.colorPrimary};\n    background: ${cssVar.colorPrimary};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorBgLayout};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryHover};\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryActive};\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  variantDashed: css`\n    border-style: dashed;\n    background: ${cssVar.colorBgContainer};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n    }\n  `,\n\n  variantFill: css`\n    border-color: transparent;\n    background: ${cssVar.colorFillTertiary};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  variantText: css`\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  variantLink: css`\n    padding-inline: 0;\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorPrimaryHover};\n      background: transparent;\n    }\n  `,\n\n  dangerOutlined: css`\n    border-color: ${cssVar.colorError};\n    background: ${cssVar.colorBgContainer};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorError};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorHover};\n      color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n\n  dangerSolid: css`\n    border-color: ${cssVar.colorError};\n    background: ${cssVar.colorError};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorBgLayout};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorErrorActive};\n    }\n  `,\n\n  dangerFill: css`\n    border-color: transparent;\n    color: ${cssVar.colorError};\n    background: ${cssVar.colorErrorBg};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorErrorBgHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorErrorBgHover};\n    }\n  `,\n\n  dangerInline: css`\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorError};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorHover};\n    }\n  `,\n\n  ghostDefault: css`\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  ghostPrimary: css`\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorPrimaryHover};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorPrimaryActive};\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  ghostDanger: css`\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorError};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  spinner: css`\n    @keyframes base-button-spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    display: inline-block;\n\n    width: 12px;\n    height: 12px;\n    border: 1.5px solid currentcolor;\n    border-block-start-color: transparent;\n    border-radius: 50%;\n\n    animation: base-button-spin 0.6s linear infinite;\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,sBAAsB;CACjC,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;wBAWa,OAAO,YAAY;;;;;;;;;;;;;;;8BAeb,OAAO,mBAAmB;;;;;;;;;;CAWtD,WAAW,GAAG;+BACe,oBAAoB,MAAM;;cAE3C,cAAc,MAAM;;qBAEb,OAAO,eAAe;;;CAIzC,YAAY,GAAG;+BACc,oBAAoB,OAAO;;cAE5C,cAAc,OAAO;;qBAEd,OAAO,eAAe;;;CAIzC,WAAW,GAAG;+BACe,oBAAoB,MAAM;;cAE3C,cAAc,MAAM;;qBAEb,OAAO,aAAa;;;CAIvC,cAAc,GAAG;;;CAIjB,YAAY,GAAG;;;CAIf,aAAa,GAAG;;;;CAKhB,YAAY,GAAG;;;CAIf,OAAO,GAAG;;;CAIV,SAAS,GAAG;;;CAIZ,eAAe,GAAG;;;;;;CAOlB,gBAAgB,GAAG;;;;;;CAOnB,eAAe,GAAG;;;;;;CAOlB,SAAS,GAAG;;;;;CAMZ,aAAa,GAAG;;;;;;;;;;;;;CAchB,gBAAgB,GAAG;;;CAInB,iBAAiB,GAAG;;;;;CAMpB,gBAAgB,GAAG;kBACH,OAAO,iBAAiB;;;;;;eAM3B,OAAO,UAAU;;;;sBAIV,OAAO,mBAAmB;eACjC,OAAO,iBAAiB;;;CAIrC,gBAAgB,GAAG;oBACD,OAAO,aAAa;kBACtB,OAAO,aAAa;;;;;eAKvB,OAAO,cAAc;;;;sBAId,OAAO,kBAAkB;oBAC3B,OAAO,kBAAkB;;;;sBAIvB,OAAO,mBAAmB;oBAC5B,OAAO,mBAAmB;;;CAI5C,eAAe,GAAG;;kBAEF,OAAO,iBAAiB;;;;;eAK3B,OAAO,UAAU;;;;sBAIV,OAAO,mBAAmB;eACjC,OAAO,iBAAiB;;;CAIrC,aAAa,GAAG;;kBAEA,OAAO,kBAAkB;;;;;eAK5B,OAAO,UAAU;;;;oBAIZ,OAAO,mBAAmB;;;;oBAI1B,OAAO,UAAU;;;CAInC,aAAa,GAAG;;;;;;;eAOH,OAAO,UAAU;;;;oBAIZ,OAAO,mBAAmB;;;CAI5C,aAAa,GAAG;;;;;;;;eAQH,OAAO,aAAa;;;;eAIpB,OAAO,kBAAkB;;;;CAKtC,gBAAgB,GAAG;oBACD,OAAO,WAAW;kBACpB,OAAO,iBAAiB;;;;;eAK3B,OAAO,WAAW;;;;sBAIX,OAAO,gBAAgB;eAC9B,OAAO,gBAAgB;oBAClB,OAAO,iBAAiB;;;CAI1C,aAAa,GAAG;oBACE,OAAO,WAAW;kBACpB,OAAO,WAAW;;;;;eAKrB,OAAO,cAAc;;;;sBAId,OAAO,gBAAgB;oBACzB,OAAO,gBAAgB;;;;sBAIrB,OAAO,iBAAiB;oBAC1B,OAAO,iBAAiB;;;CAI1C,YAAY,GAAG;;aAEJ,OAAO,WAAW;kBACb,OAAO,aAAa;;;eAGvB,OAAO,gBAAgB;oBAClB,OAAO,kBAAkB;;;;eAI9B,OAAO,iBAAiB;oBACnB,OAAO,kBAAkB;;;CAI3C,cAAc,GAAG;;;;eAIJ,OAAO,WAAW;;;;eAIlB,OAAO,gBAAgB;;;CAIpC,cAAc,GAAG;;;;;;;eAOJ,OAAO,UAAU;;;;oBAIZ,OAAO,mBAAmB;;;;oBAI1B,OAAO,UAAU;;;CAInC,cAAc,GAAG;;;;;;;eAOJ,OAAO,aAAa;;;;eAIpB,OAAO,kBAAkB;oBACpB,OAAO,mBAAmB;;;;eAI/B,OAAO,mBAAmB;oBACrB,OAAO,UAAU;;;CAInC,aAAa,GAAG;;;;;;;eAOH,OAAO,WAAW;;;;eAIlB,OAAO,gBAAgB;oBAClB,OAAO,mBAAmB;;;;eAI/B,OAAO,iBAAiB;oBACnB,OAAO,UAAU;;;CAInC,SAAS,GAAG;;;;;;;;;;;;;;;;;AAiBd,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Button/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const buttonPaddingInline = {\n  large: 16,\n  middle: 14,\n  small: 8,\n} as const;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  base: css`\n    cursor: pointer;\n\n    position: relative;\n\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 1px solid ${cssVar.colorBorder};\n\n    font-weight: 500;\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n\n    transition:\n      color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      background 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    ${focusRing};\n\n    &:disabled,\n    &[aria-disabled='true'] {\n      pointer-events: none;\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n\n  sizeSmall: css`\n    --button-padding-inline: ${buttonPaddingInline.small}px;\n\n    height: ${controlHeight.small}px;\n    padding-inline: var(--button-padding-inline);\n    border-radius: ${cssVar.borderRadiusSM};\n    font-size: 12px;\n  `,\n\n  sizeMiddle: css`\n    --button-padding-inline: ${buttonPaddingInline.middle}px;\n\n    height: ${controlHeight.middle}px;\n    padding-inline: var(--button-padding-inline);\n    border-radius: ${cssVar.borderRadiusSM};\n    font-size: 13px;\n  `,\n\n  sizeLarge: css`\n    --button-padding-inline: ${buttonPaddingInline.large}px;\n\n    height: ${controlHeight.large}px;\n    padding-inline: var(--button-padding-inline);\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n\n  outdentStart: css`\n    margin-inline-start: calc(var(--button-padding-inline) * -1);\n  `,\n\n  outdentEnd: css`\n    margin-inline-end: calc(var(--button-padding-inline) * -1);\n  `,\n\n  shapeCircle: css`\n    padding-inline: 0;\n    border-radius: 50%;\n  `,\n\n  shapeRound: css`\n    border-radius: 999px;\n  `,\n\n  block: css`\n    width: 100%;\n  `,\n\n  iconEnd: css`\n    flex-direction: row-reverse;\n  `,\n\n  iconOnlySmall: css`\n    --button-padding-inline: 0px;\n\n    width: 24px;\n    padding-inline: 0;\n  `,\n\n  iconOnlyMiddle: css`\n    --button-padding-inline: 0px;\n\n    width: 32px;\n    padding-inline: 0;\n  `,\n\n  iconOnlyLarge: css`\n    --button-padding-inline: 0px;\n\n    width: 40px;\n    padding-inline: 0;\n  `,\n\n  iconBox: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  spinnerSlot: css`\n    overflow: hidden;\n\n    width: 0;\n    margin-inline-end: -6px;\n\n    opacity: 0;\n\n    transition:\n      width 380ms cubic-bezier(0.22, 1, 0.36, 1),\n      margin 380ms cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);\n  `,\n\n  spinnerSlotEnd: css`\n    margin-inline: -6px 0;\n  `,\n\n  spinnerSlotShow: css`\n    width: 12px;\n    margin-inline: 0;\n    opacity: 1;\n  `,\n\n  variantDefault: css`\n    background: ${cssVar.colorBgContainer};\n\n    /* &:hover/&:active included so the anchor form outranks antd's global a:hover/a:active link color */\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n    }\n  `,\n\n  variantPrimary: css`\n    border-color: ${cssVar.colorPrimary};\n    background: ${cssVar.colorPrimary};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorBgLayout};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryHover};\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryActive};\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  variantDashed: css`\n    border-style: dashed;\n    background: ${cssVar.colorBgContainer};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n    }\n  `,\n\n  variantFill: css`\n    border-color: transparent;\n    background: ${cssVar.colorFillTertiary};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  variantText: css`\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  variantLink: css`\n    padding-inline: 0;\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorPrimaryHover};\n      background: transparent;\n    }\n  `,\n\n  dangerOutlined: css`\n    border-color: ${cssVar.colorError};\n    background: ${cssVar.colorBgContainer};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorError};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorHover};\n      color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n\n  dangerSolid: css`\n    border-color: ${cssVar.colorError};\n    background: ${cssVar.colorError};\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorBgLayout};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      border-color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorErrorActive};\n    }\n  `,\n\n  dangerFill: css`\n    border-color: transparent;\n    color: ${cssVar.colorError};\n    background: ${cssVar.colorErrorBg};\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorErrorBgHover};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorErrorBgHover};\n    }\n  `,\n\n  dangerInline: css`\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorError};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorHover};\n    }\n  `,\n\n  ghostDefault: css`\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorText};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  ghostPrimary: css`\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorPrimaryHover};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorPrimaryActive};\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  ghostDanger: css`\n    border-color: transparent;\n    background: transparent;\n\n    &,\n    &:hover,\n    &:active {\n      color: ${cssVar.colorError};\n    }\n\n    &:hover:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active:not(:disabled, [aria-disabled='true']) {\n      color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  spinner: css`\n    @keyframes base-button-spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    display: inline-block;\n\n    width: 12px;\n    height: 12px;\n    border: 1.5px solid currentcolor;\n    border-block-start-color: transparent;\n    border-radius: 50%;\n\n    animation: base-button-spin 0.6s linear infinite;\n  `,\n}));\n"],"mappings":"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"}

package/es/base-ui/Checkbox/style.mjs

@@ -1,3 +1,4 @@
+import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 //#region src/base-ui/Checkbox/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
@@ -41,10 +42,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       border-color: ${cssVar.colorBorder};
     }
 
-    &:focus-visible {
-      outline: 2px solid ${cssVar.colorPrimaryBorder};
-      outline-offset: 1px;
-    }
+    ${focusRing};
 
     &[data-checked],
     &[data-indeterminate] {

package/es/base-ui/Checkbox/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Checkbox/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  label: css`\n    cursor: pointer;\n    user-select: none;\n    display: inline-flex;\n    align-items: center;\n\n    &:has([data-disabled]) {\n      cursor: not-allowed;\n    }\n  `,\n  root: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n\n    color: ${cssVar.colorBgLayout};\n\n    background: ${cssVar.colorBgContainer};\n    outline: none;\n\n    transition:\n      background 150ms ${cssVar.motionEaseOut},\n      border-color 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled], [data-checked], [data-indeterminate]) {\n      border-color: ${cssVar.colorBorder};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &[data-checked],\n    &[data-indeterminate] {\n      border-color: var(--lobe-checkbox-bg, ${cssVar.colorPrimary});\n      background: var(--lobe-checkbox-bg, ${cssVar.colorPrimary});\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n\n      border-color: ${cssVar.colorFill};\n\n      color: ${cssVar.colorText};\n\n      opacity: 0.25;\n      background: ${cssVar.colorFill};\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;CAKd,OAAO,GAAG;;;;;;;;;;CAUV,MAAM,GAAG;;;;;;;;;;wBAUa,OAAO,qBAAqB;;aAEvC,OAAO,cAAc;;kBAEhB,OAAO,iBAAiB;;;;yBAIjB,OAAO,cAAc;2BACnB,OAAO,cAAc;;;sBAG1B,OAAO,YAAY;;;;2BAId,OAAO,mBAAmB;;;;;;8CAMP,OAAO,aAAa;4CACtB,OAAO,aAAa;;;;;;sBAM1C,OAAO,UAAU;;eAExB,OAAO,UAAU;;;oBAGZ,OAAO,UAAU;;;AAGrC,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Checkbox/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  label: css`\n    cursor: pointer;\n    user-select: none;\n    display: inline-flex;\n    align-items: center;\n\n    &:has([data-disabled]) {\n      cursor: not-allowed;\n    }\n  `,\n  root: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n\n    color: ${cssVar.colorBgLayout};\n\n    background: ${cssVar.colorBgContainer};\n    outline: none;\n\n    transition:\n      background 150ms ${cssVar.motionEaseOut},\n      border-color 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled], [data-checked], [data-indeterminate]) {\n      border-color: ${cssVar.colorBorder};\n    }\n\n    ${focusRing};\n\n    &[data-checked],\n    &[data-indeterminate] {\n      border-color: var(--lobe-checkbox-bg, ${cssVar.colorPrimary});\n      background: var(--lobe-checkbox-bg, ${cssVar.colorPrimary});\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n\n      border-color: ${cssVar.colorFill};\n\n      color: ${cssVar.colorText};\n\n      opacity: 0.25;\n      background: ${cssVar.colorFill};\n    }\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;CAKd,OAAO,GAAG;;;;;;;;;;CAUV,MAAM,GAAG;;;;;;;;;;wBAUa,OAAO,qBAAqB;;aAEvC,OAAO,cAAc;;kBAEhB,OAAO,iBAAiB;;;;yBAIjB,OAAO,cAAc;2BACnB,OAAO,cAAc;;;sBAG1B,OAAO,YAAY;;;MAGnC,UAAU;;;;8CAI8B,OAAO,aAAa;4CACtB,OAAO,aAAa;;;;;;sBAM1C,OAAO,UAAU;;eAExB,OAAO,UAAU;;;oBAGZ,OAAO,UAAU;;;AAGrC,EAAE"}

package/es/base-ui/Drawer/style.mjs

@@ -1,3 +1,4 @@
+import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 //#region src/base-ui/Drawer/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
@@ -251,10 +252,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       transform: scale(0.96);
     }
 
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};
-    }
+    ${focusRing};
   `,
 	content: css`
     overflow: hidden auto;

package/es/base-ui/Drawer/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Drawer/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  backdrop: css`\n    position: fixed;\n    z-index: 1200;\n    inset: 0;\n\n    background: ${cssVar.colorBgMask};\n\n    transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      opacity: 0;\n    }\n  `,\n\n  popup: css`\n    pointer-events: none;\n\n    position: fixed;\n    z-index: 1201;\n\n    display: flex;\n\n    /* clamp here rather than on the panel, so an oversized size prop shrinks the\n       box instead of detaching the panel from its anchored edge */\n    max-width: 100dvw;\n    max-height: 100dvh;\n  `,\n\n  popupLeft: css`\n    inset-block: 0;\n    inset-inline-start: 0;\n  `,\n\n  popupRight: css`\n    inset-block: 0;\n    inset-inline-end: 0;\n  `,\n\n  popupTop: css`\n    inset-block-start: 0;\n    inset-inline: 0;\n  `,\n\n  popupBottom: css`\n    inset-block-end: 0;\n    inset-inline: 0;\n  `,\n\n  panel: css`\n    pointer-events: auto;\n\n    position: relative;\n\n    /* push offset rides on CSS vars so [data-starting-style] can override the whole transform */\n    transform: translate(var(--drawer-push-x, 0), var(--drawer-push-y, 0));\n\n    overflow: hidden;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    box-sizing: border-box;\n    min-width: 0;\n    min-height: 0;\n\n    /* Container, not elevated: the antd-based Drawer paints its panel on container, and in dark\n       themes elevated is a visibly lighter step — the two drawers must read as the same surface. */\n    background: ${cssVar.colorBgContainer};\n\n    /* Geometry and alphas are antd's boxShadowDrawer{Left,Right,Up,Down} verbatim, so both drawers\n       cast identically. antd builds those by scaling colorShadow's *own* alpha by 8/12/5%, and\n       colorShadow flips from opaque black to rgba(255,255,255,0.2) in dark — hence the color-mix\n       against the raw var rather than a literal black (colorShadow has no AliasToken typing, so\n       cssVar cannot reach it). An edge-anchored panel casts along its placement axis rather than\n       downward like a centred dialog would: direction classes set the sign, weight classes scale\n       the alpha, so the two compose without a class per combination. */\n    box-shadow:\n      calc(var(--drawer-cast-x, 0) * 6px) calc(var(--drawer-cast-y, 0) * 6px) 16px 0\n        color-mix(\n          in srgb,\n          var(--ant-color-shadow, #000) calc(8% * var(--drawer-cast-alpha, 1)),\n          transparent\n        ),\n      calc(var(--drawer-cast-x, 0) * 3px) calc(var(--drawer-cast-y, 0) * 3px) 6px -4px\n        color-mix(\n          in srgb,\n          var(--ant-color-shadow, #000) calc(12% * var(--drawer-cast-alpha, 1)),\n          transparent\n        ),\n      calc(var(--drawer-cast-x, 0) * 9px) calc(var(--drawer-cast-y, 0) * 9px) 28px 8px\n        color-mix(\n          in srgb,\n          var(--ant-color-shadow, #000) calc(5% * var(--drawer-cast-alpha, 1)),\n          transparent\n        );\n\n    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);\n  `,\n\n  panelLeft: css`\n    --drawer-cast-x: 1;\n\n    border-inline-end: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateX(-100%);\n    }\n  `,\n\n  panelRight: css`\n    --drawer-cast-x: -1;\n\n    border-inline-start: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateX(100%);\n    }\n  `,\n\n  panelTop: css`\n    --drawer-cast-y: 1;\n\n    border-block-end: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(-100%);\n    }\n  `,\n\n  panelBottom: css`\n    --drawer-cast-y: -1;\n\n    border-block-start: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(100%);\n    }\n  `,\n\n  /* Only the edges facing content get rounded; the anchored edge stays flush with the viewport.\n     Kept apart from the direction classes so a flush panel can drop the radius by omitting the\n     class rather than by out-specifying it. */\n  panelRoundedLeft: css`\n    border-start-end-radius: 12px;\n    border-end-end-radius: 12px;\n  `,\n\n  panelRoundedRight: css`\n    border-start-start-radius: 12px;\n    border-end-start-radius: 12px;\n  `,\n\n  panelRoundedTop: css`\n    border-end-start-radius: 12px;\n    border-end-end-radius: 12px;\n  `,\n\n  panelRoundedBottom: css`\n    border-start-start-radius: 12px;\n    border-start-end-radius: 12px;\n  `,\n\n  /* Filling the viewport leaves nothing to cast onto or to divide from — the shadow and the edge\n     rule would only dirty the seam against the viewport. */\n  panelFlush: css`\n    --drawer-cast-alpha: 0;\n    --drawer-edge-width: 0;\n  `,\n\n  /* Without a backdrop the panel has to earn its separation from live content behind it. */\n  panelBoosted: css`\n    --drawer-cast-alpha: 1.75;\n  `,\n\n  /* A pushed ancestor has receded behind its child; stacking full-weight casts would silt up. */\n  panelRecessed: css`\n    --drawer-cast-alpha: 0.5;\n  `,\n\n  header: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    min-height: 56px;\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorSplit};\n  `,\n\n  containerInner: css`\n    display: flex;\n    flex: 1;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 100%;\n    margin-inline: auto;\n  `,\n\n  containerInnerFooter: css`\n    justify-content: flex-end;\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 17px;\n    font-weight: 600;\n    line-height: 1.4;\n    color: ${cssVar.colorText};\n    letter-spacing: -0.005em;\n  `,\n\n  extra: css`\n    display: flex;\n    flex: none;\n    gap: 4px;\n    align-items: center;\n\n    margin-inline-end: -4px;\n  `,\n\n  extraFloating: css`\n    position: absolute;\n    z-index: 1;\n    inset-block-start: 12px;\n    inset-inline-end: 12px;\n\n    margin-inline-end: 0;\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    position: relative;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: 8px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition:\n      color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      background 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      transform 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    /* Restores the 40px target the 32px visual box gives up, without nudging the header layout. */\n    &::after {\n      content: '';\n      position: absolute;\n      inset: -4px;\n    }\n\n    &:hover {\n      transform: scale(1.04);\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active {\n      transform: scale(0.96);\n    }\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n    }\n  `,\n\n  content: css`\n    overflow: hidden auto;\n    display: flex;\n    flex: 1;\n    min-height: 0;\n  `,\n\n  bodyContent: css`\n    display: flex;\n    flex-direction: column;\n\n    width: 100%;\n    min-height: 100%;\n    margin-inline: auto;\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n\n  contentSidebar: css`\n    overflow: hidden;\n  `,\n\n  bodyContentSidebar: css`\n    flex-direction: row;\n    height: 100%;\n    min-height: 0;\n    padding: 0;\n  `,\n\n  sidebar: css`\n    overflow: hidden auto;\n    flex: none;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n\n    background: ${cssVar.colorBgLayout};\n  `,\n\n  sidebarContent: css`\n    overflow: hidden auto;\n    flex: 1;\n\n    min-width: 0;\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n\n  footer: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-end;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-start: 1px solid ${cssVar.colorSplit};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;kBAKG,OAAO,YAAY;;;;;;;;;CAUnC,OAAO,GAAG;;;;;;;;;;;;;CAcV,WAAW,GAAG;;;;CAKd,YAAY,GAAG;;;;CAKf,UAAU,GAAG;;;;CAKb,aAAa,GAAG;;;;CAKhB,OAAO,GAAG;;;;;;;;;;;;;;;;;;;kBAmBM,OAAO,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxC,WAAW,GAAG;;;6DAG6C,OAAO,YAAY;;;;;;;CAQ9E,YAAY,GAAG;;;+DAG8C,OAAO,YAAY;;;;;;;CAQhF,UAAU,GAAG;;;4DAG6C,OAAO,YAAY;;;;;;;CAQ7E,aAAa,GAAG;;;8DAG4C,OAAO,YAAY;;;;;;;CAW/E,kBAAkB,GAAG;;;;CAKrB,mBAAmB,GAAG;;;;CAKtB,iBAAiB,GAAG;;;;CAKpB,oBAAoB,GAAG;;;;CAOvB,YAAY,GAAG;;;;CAMf,cAAc,GAAG;;;CAKjB,eAAe,GAAG;;;CAIlB,QAAQ,GAAG;;;;;;;;;;kCAUqB,OAAO,WAAW;;CAGlD,gBAAgB,GAAG;;;;;;;;;;CAWnB,sBAAsB,GAAG;;;CAIzB,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;;CAI5B,OAAO,GAAG;;;;;;;;CASV,eAAe,GAAG;;;;;;;;CASlB,OAAO,GAAG;;;;;;;;;;;;;;;aAeC,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;eAkBvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;;;;;8BAShB,OAAO,mBAAmB;;;CAItD,SAAS,GAAG;;;;;;CAOZ,aAAa,GAAG;;;;;;;;;;CAWhB,gBAAgB,GAAG;;;CAInB,oBAAoB,GAAG;;;;;;CAOvB,SAAS,GAAG;;;;;;mCAMqB,OAAO,qBAAqB;;kBAE7C,OAAO,cAAc;;CAGrC,gBAAgB,GAAG;;;;;;;;CASnB,QAAQ,GAAG;;;;;;;;;oCASuB,OAAO,WAAW;;AAEtD,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Drawer/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  backdrop: css`\n    position: fixed;\n    z-index: 1200;\n    inset: 0;\n\n    background: ${cssVar.colorBgMask};\n\n    transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      opacity: 0;\n    }\n  `,\n\n  popup: css`\n    pointer-events: none;\n\n    position: fixed;\n    z-index: 1201;\n\n    display: flex;\n\n    /* clamp here rather than on the panel, so an oversized size prop shrinks the\n       box instead of detaching the panel from its anchored edge */\n    max-width: 100dvw;\n    max-height: 100dvh;\n  `,\n\n  popupLeft: css`\n    inset-block: 0;\n    inset-inline-start: 0;\n  `,\n\n  popupRight: css`\n    inset-block: 0;\n    inset-inline-end: 0;\n  `,\n\n  popupTop: css`\n    inset-block-start: 0;\n    inset-inline: 0;\n  `,\n\n  popupBottom: css`\n    inset-block-end: 0;\n    inset-inline: 0;\n  `,\n\n  panel: css`\n    pointer-events: auto;\n\n    position: relative;\n\n    /* push offset rides on CSS vars so [data-starting-style] can override the whole transform */\n    transform: translate(var(--drawer-push-x, 0), var(--drawer-push-y, 0));\n\n    overflow: hidden;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    box-sizing: border-box;\n    min-width: 0;\n    min-height: 0;\n\n    /* Container, not elevated: the antd-based Drawer paints its panel on container, and in dark\n       themes elevated is a visibly lighter step — the two drawers must read as the same surface. */\n    background: ${cssVar.colorBgContainer};\n\n    /* Geometry and alphas are antd's boxShadowDrawer{Left,Right,Up,Down} verbatim, so both drawers\n       cast identically. antd builds those by scaling colorShadow's *own* alpha by 8/12/5%, and\n       colorShadow flips from opaque black to rgba(255,255,255,0.2) in dark — hence the color-mix\n       against the raw var rather than a literal black (colorShadow has no AliasToken typing, so\n       cssVar cannot reach it). An edge-anchored panel casts along its placement axis rather than\n       downward like a centred dialog would: direction classes set the sign, weight classes scale\n       the alpha, so the two compose without a class per combination. */\n    box-shadow:\n      calc(var(--drawer-cast-x, 0) * 6px) calc(var(--drawer-cast-y, 0) * 6px) 16px 0\n        color-mix(\n          in srgb,\n          var(--ant-color-shadow, #000) calc(8% * var(--drawer-cast-alpha, 1)),\n          transparent\n        ),\n      calc(var(--drawer-cast-x, 0) * 3px) calc(var(--drawer-cast-y, 0) * 3px) 6px -4px\n        color-mix(\n          in srgb,\n          var(--ant-color-shadow, #000) calc(12% * var(--drawer-cast-alpha, 1)),\n          transparent\n        ),\n      calc(var(--drawer-cast-x, 0) * 9px) calc(var(--drawer-cast-y, 0) * 9px) 28px 8px\n        color-mix(\n          in srgb,\n          var(--ant-color-shadow, #000) calc(5% * var(--drawer-cast-alpha, 1)),\n          transparent\n        );\n\n    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);\n  `,\n\n  panelLeft: css`\n    --drawer-cast-x: 1;\n\n    border-inline-end: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateX(-100%);\n    }\n  `,\n\n  panelRight: css`\n    --drawer-cast-x: -1;\n\n    border-inline-start: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateX(100%);\n    }\n  `,\n\n  panelTop: css`\n    --drawer-cast-y: 1;\n\n    border-block-end: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(-100%);\n    }\n  `,\n\n  panelBottom: css`\n    --drawer-cast-y: -1;\n\n    border-block-start: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(100%);\n    }\n  `,\n\n  /* Only the edges facing content get rounded; the anchored edge stays flush with the viewport.\n     Kept apart from the direction classes so a flush panel can drop the radius by omitting the\n     class rather than by out-specifying it. */\n  panelRoundedLeft: css`\n    border-start-end-radius: 12px;\n    border-end-end-radius: 12px;\n  `,\n\n  panelRoundedRight: css`\n    border-start-start-radius: 12px;\n    border-end-start-radius: 12px;\n  `,\n\n  panelRoundedTop: css`\n    border-end-start-radius: 12px;\n    border-end-end-radius: 12px;\n  `,\n\n  panelRoundedBottom: css`\n    border-start-start-radius: 12px;\n    border-start-end-radius: 12px;\n  `,\n\n  /* Filling the viewport leaves nothing to cast onto or to divide from — the shadow and the edge\n     rule would only dirty the seam against the viewport. */\n  panelFlush: css`\n    --drawer-cast-alpha: 0;\n    --drawer-edge-width: 0;\n  `,\n\n  /* Without a backdrop the panel has to earn its separation from live content behind it. */\n  panelBoosted: css`\n    --drawer-cast-alpha: 1.75;\n  `,\n\n  /* A pushed ancestor has receded behind its child; stacking full-weight casts would silt up. */\n  panelRecessed: css`\n    --drawer-cast-alpha: 0.5;\n  `,\n\n  header: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    min-height: 56px;\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorSplit};\n  `,\n\n  containerInner: css`\n    display: flex;\n    flex: 1;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 100%;\n    margin-inline: auto;\n  `,\n\n  containerInnerFooter: css`\n    justify-content: flex-end;\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 17px;\n    font-weight: 600;\n    line-height: 1.4;\n    color: ${cssVar.colorText};\n    letter-spacing: -0.005em;\n  `,\n\n  extra: css`\n    display: flex;\n    flex: none;\n    gap: 4px;\n    align-items: center;\n\n    margin-inline-end: -4px;\n  `,\n\n  extraFloating: css`\n    position: absolute;\n    z-index: 1;\n    inset-block-start: 12px;\n    inset-inline-end: 12px;\n\n    margin-inline-end: 0;\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    position: relative;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: 8px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition:\n      color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      background 160ms cubic-bezier(0.32, 0.72, 0, 1),\n      transform 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    /* Restores the 40px target the 32px visual box gives up, without nudging the header layout. */\n    &::after {\n      content: '';\n      position: absolute;\n      inset: -4px;\n    }\n\n    &:hover {\n      transform: scale(1.04);\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:active {\n      transform: scale(0.96);\n    }\n\n    ${focusRing};\n  `,\n\n  content: css`\n    overflow: hidden auto;\n    display: flex;\n    flex: 1;\n    min-height: 0;\n  `,\n\n  bodyContent: css`\n    display: flex;\n    flex-direction: column;\n\n    width: 100%;\n    min-height: 100%;\n    margin-inline: auto;\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n\n  contentSidebar: css`\n    overflow: hidden;\n  `,\n\n  bodyContentSidebar: css`\n    flex-direction: row;\n    height: 100%;\n    min-height: 0;\n    padding: 0;\n  `,\n\n  sidebar: css`\n    overflow: hidden auto;\n    flex: none;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n\n    background: ${cssVar.colorBgLayout};\n  `,\n\n  sidebarContent: css`\n    overflow: hidden auto;\n    flex: 1;\n\n    min-width: 0;\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n\n  footer: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-end;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-start: 1px solid ${cssVar.colorSplit};\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;kBAKG,OAAO,YAAY;;;;;;;;;CAUnC,OAAO,GAAG;;;;;;;;;;;;;CAcV,WAAW,GAAG;;;;CAKd,YAAY,GAAG;;;;CAKf,UAAU,GAAG;;;;CAKb,aAAa,GAAG;;;;CAKhB,OAAO,GAAG;;;;;;;;;;;;;;;;;;;kBAmBM,OAAO,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxC,WAAW,GAAG;;;6DAG6C,OAAO,YAAY;;;;;;;CAQ9E,YAAY,GAAG;;;+DAG8C,OAAO,YAAY;;;;;;;CAQhF,UAAU,GAAG;;;4DAG6C,OAAO,YAAY;;;;;;;CAQ7E,aAAa,GAAG;;;8DAG4C,OAAO,YAAY;;;;;;;CAW/E,kBAAkB,GAAG;;;;CAKrB,mBAAmB,GAAG;;;;CAKtB,iBAAiB,GAAG;;;;CAKpB,oBAAoB,GAAG;;;;CAOvB,YAAY,GAAG;;;;CAMf,cAAc,GAAG;;;CAKjB,eAAe,GAAG;;;CAIlB,QAAQ,GAAG;;;;;;;;;;kCAUqB,OAAO,WAAW;;CAGlD,gBAAgB,GAAG;;;;;;;;;;CAWnB,sBAAsB,GAAG;;;CAIzB,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;;CAI5B,OAAO,GAAG;;;;;;;;CASV,eAAe,GAAG;;;;;;;;CASlB,OAAO,GAAG;;;;;;;;;;;;;;;aAeC,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;eAkBvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;;;MAOxC,UAAU;;CAGd,SAAS,GAAG;;;;;;CAOZ,aAAa,GAAG;;;;;;;;;;CAWhB,gBAAgB,GAAG;;;CAInB,oBAAoB,GAAG;;;;;;CAOvB,SAAS,GAAG;;;;;;mCAMqB,OAAO,qBAAqB;;kBAE7C,OAAO,cAAc;;CAGrC,gBAAgB,GAAG;;;;;;;;CASnB,QAAQ,GAAG;;;;;;;;;oCASuB,OAAO,WAAW;;AAEtD,EAAE"}

package/es/base-ui/Form/style.mjs

@@ -1,4 +1,5 @@
 import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles, responsive } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/Form/style.ts
@@ -188,10 +189,8 @@ const groupStyles = createStaticStyles(({ css, cssVar }) => ({
     background: none;
     outline: none;
 
-    &:focus-visible {
-      border-radius: ${cssVar.borderRadius};
-      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};
-    }
+    border-radius: ${cssVar.borderRadius};
+    ${focusRing};
   `
 }));
 const groupVariants = cva(null, {

package/es/base-ui/Form/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Form/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  root: css`\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    width: 100%;\n\n    ${responsive.sm} {\n      gap: 0 !important;\n    }\n  `,\n  rootBorderless: css`\n    gap: 48px;\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: styles.rootBorderless,\n      filled: null,\n      outlined: null,\n    },\n  },\n});\n\nexport const fieldStyles = createStaticStyles(({ css, cssVar }) => ({\n  control: css`\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    align-items: flex-end;\n\n    min-width: var(--form-field-min-width, unset);\n  `,\n  controlVertical: css`\n    align-items: stretch;\n    width: 100%;\n  `,\n  error: css`\n    font-size: 12px;\n    color: ${cssVar.colorError};\n  `,\n  horizontal: css`\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  `,\n  label: css`\n    display: block;\n    flex: 1;\n    max-width: 100%;\n    text-align: start;\n  `,\n  root: css`\n    display: flex;\n    gap: 12px;\n\n    box-sizing: border-box;\n    width: 100%;\n    padding-block: 16px;\n  `,\n  vertical: css`\n    flex-direction: column;\n    gap: 8px;\n    align-items: stretch;\n  `,\n}));\n\nexport const fieldVariants = cva(fieldStyles.root, {\n  defaultVariants: {\n    layout: 'horizontal',\n  },\n  variants: {\n    layout: {\n      horizontal: fieldStyles.horizontal,\n      vertical: fieldStyles.vertical,\n    },\n  },\n});\n\nexport const dividerStyles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    width: 100%;\n    height: 1px;\n    margin: 0;\n    border: none;\n\n    background: ${cssVar.colorBorderSecondary};\n  `,\n}));\n\nexport const groupStyles = createStaticStyles(({ css, cssVar }) => ({\n  body: css`\n    display: flex;\n    flex-direction: column;\n  `,\n  bodyBoxed: css`\n    padding-inline: 16px;\n  `,\n  chevron: css`\n    flex: none;\n    color: ${cssVar.colorTextDescription};\n    transition: transform 200ms ${cssVar.motionEaseOut};\n\n    [data-panel-open] & {\n      transform: rotate(180deg);\n    }\n  `,\n  desc: css`\n    font-size: 12px;\n    font-weight: 400;\n    color: ${cssVar.colorTextDescription};\n  `,\n  header: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 100%;\n  `,\n  headerBorderless: css`\n    padding-block-end: 16px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  headerBoxed: css`\n    padding: 16px;\n  `,\n  mobileBody: css`\n    padding-block: 0;\n    padding-inline: 16px;\n    background: ${cssVar.colorBgContainer};\n  `,\n  mobileHeader: css`\n    padding: 16px;\n    background: ${cssVar.colorBgLayout};\n  `,\n  mobileTitle: css`\n    font-size: 14px;\n    font-weight: 400;\n    opacity: 0.5;\n  `,\n  panel: css`\n    overflow: hidden;\n    height: var(--collapsible-panel-height);\n    transition: height 200ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      height: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  rootFilled: css`\n    border-radius: ${cssVar.borderRadiusLG};\n    ${lobeStaticStylish.variantFilledWithoutHover}\n    background: ${cssVar.colorFillQuaternary};\n  `,\n  rootOutlined: css`\n    border-radius: ${cssVar.borderRadiusLG};\n    ${lobeStaticStylish.variantOutlinedWithoutHover}\n  `,\n  title: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n\n    font-size: 16px;\n    font-weight: bold;\n    color: ${cssVar.colorText};\n  `,\n  titleBorderless: css`\n    font-size: 18px;\n  `,\n  trigger: css`\n    cursor: pointer;\n\n    display: flex;\n    flex: 1;\n    gap: 12px;\n    align-items: center;\n\n    margin: 0;\n    padding: 0;\n    border: none;\n\n    text-align: start;\n\n    background: none;\n    outline: none;\n\n    &:focus-visible {\n      border-radius: ${cssVar.borderRadius};\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n    }\n  `,\n}));\n\nexport const groupVariants = cva(null, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: null,\n      filled: groupStyles.rootFilled,\n      outlined: groupStyles.rootOutlined,\n    },\n  },\n});\n\nexport const flatGroupStyles = createStaticStyles(({ cx, css, cssVar }) => ({\n  borderless: cx(\n    lobeStaticStylish.variantBorderlessWithoutHover,\n    css`\n      padding-inline: 0;\n    `,\n  ),\n  filled: cx(\n    lobeStaticStylish.variantFilledWithoutHover,\n    css`\n      background: ${cssVar.colorFillQuaternary};\n    `,\n  ),\n  mobile: css`\n    padding-block: 0;\n    padding-inline: 16px;\n    border-radius: 0;\n    background: ${cssVar.colorBgContainer};\n  `,\n  outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n  root: css`\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n}));\n\nexport const flatGroupVariants = cva(flatGroupStyles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: flatGroupStyles.borderless,\n      filled: flatGroupStyles.filled,\n      outlined: flatGroupStyles.outlined,\n    },\n  },\n});\n\nexport const footerStyles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    ${responsive.sm} {\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const submitFooterStyles = createStaticStyles(({ css, cssVar }) => ({\n  floatFooter: css`\n    position: fixed;\n    z-index: 1000;\n    inset-block-end: 24px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 48px;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow: ${cssVar.boxShadowSecondary};\n  `,\n  footer: css`\n    ${responsive.sm} {\n      margin-block-start: calc(-1 * ${cssVar.borderRadius});\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const titleStyles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    position: relative;\n    text-align: start;\n  `,\n  desc: css`\n    display: block;\n\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 1.44;\n    color: ${cssVar.colorTextDescription};\n    word-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  title: css`\n    font-weight: 500;\n    line-height: 1;\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Form/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  root: css`\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    width: 100%;\n\n    ${responsive.sm} {\n      gap: 0 !important;\n    }\n  `,\n  rootBorderless: css`\n    gap: 48px;\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: styles.rootBorderless,\n      filled: null,\n      outlined: null,\n    },\n  },\n});\n\nexport const fieldStyles = createStaticStyles(({ css, cssVar }) => ({\n  control: css`\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    align-items: flex-end;\n\n    min-width: var(--form-field-min-width, unset);\n  `,\n  controlVertical: css`\n    align-items: stretch;\n    width: 100%;\n  `,\n  error: css`\n    font-size: 12px;\n    color: ${cssVar.colorError};\n  `,\n  horizontal: css`\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  `,\n  label: css`\n    display: block;\n    flex: 1;\n    max-width: 100%;\n    text-align: start;\n  `,\n  root: css`\n    display: flex;\n    gap: 12px;\n\n    box-sizing: border-box;\n    width: 100%;\n    padding-block: 16px;\n  `,\n  vertical: css`\n    flex-direction: column;\n    gap: 8px;\n    align-items: stretch;\n  `,\n}));\n\nexport const fieldVariants = cva(fieldStyles.root, {\n  defaultVariants: {\n    layout: 'horizontal',\n  },\n  variants: {\n    layout: {\n      horizontal: fieldStyles.horizontal,\n      vertical: fieldStyles.vertical,\n    },\n  },\n});\n\nexport const dividerStyles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    width: 100%;\n    height: 1px;\n    margin: 0;\n    border: none;\n\n    background: ${cssVar.colorBorderSecondary};\n  `,\n}));\n\nexport const groupStyles = createStaticStyles(({ css, cssVar }) => ({\n  body: css`\n    display: flex;\n    flex-direction: column;\n  `,\n  bodyBoxed: css`\n    padding-inline: 16px;\n  `,\n  chevron: css`\n    flex: none;\n    color: ${cssVar.colorTextDescription};\n    transition: transform 200ms ${cssVar.motionEaseOut};\n\n    [data-panel-open] & {\n      transform: rotate(180deg);\n    }\n  `,\n  desc: css`\n    font-size: 12px;\n    font-weight: 400;\n    color: ${cssVar.colorTextDescription};\n  `,\n  header: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 100%;\n  `,\n  headerBorderless: css`\n    padding-block-end: 16px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  headerBoxed: css`\n    padding: 16px;\n  `,\n  mobileBody: css`\n    padding-block: 0;\n    padding-inline: 16px;\n    background: ${cssVar.colorBgContainer};\n  `,\n  mobileHeader: css`\n    padding: 16px;\n    background: ${cssVar.colorBgLayout};\n  `,\n  mobileTitle: css`\n    font-size: 14px;\n    font-weight: 400;\n    opacity: 0.5;\n  `,\n  panel: css`\n    overflow: hidden;\n    height: var(--collapsible-panel-height);\n    transition: height 200ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      height: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  rootFilled: css`\n    border-radius: ${cssVar.borderRadiusLG};\n    ${lobeStaticStylish.variantFilledWithoutHover}\n    background: ${cssVar.colorFillQuaternary};\n  `,\n  rootOutlined: css`\n    border-radius: ${cssVar.borderRadiusLG};\n    ${lobeStaticStylish.variantOutlinedWithoutHover}\n  `,\n  title: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n\n    font-size: 16px;\n    font-weight: bold;\n    color: ${cssVar.colorText};\n  `,\n  titleBorderless: css`\n    font-size: 18px;\n  `,\n  trigger: css`\n    cursor: pointer;\n\n    display: flex;\n    flex: 1;\n    gap: 12px;\n    align-items: center;\n\n    margin: 0;\n    padding: 0;\n    border: none;\n\n    text-align: start;\n\n    background: none;\n    outline: none;\n\n    border-radius: ${cssVar.borderRadius};\n    ${focusRing};\n  `,\n}));\n\nexport const groupVariants = cva(null, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: null,\n      filled: groupStyles.rootFilled,\n      outlined: groupStyles.rootOutlined,\n    },\n  },\n});\n\nexport const flatGroupStyles = createStaticStyles(({ cx, css, cssVar }) => ({\n  borderless: cx(\n    lobeStaticStylish.variantBorderlessWithoutHover,\n    css`\n      padding-inline: 0;\n    `,\n  ),\n  filled: cx(\n    lobeStaticStylish.variantFilledWithoutHover,\n    css`\n      background: ${cssVar.colorFillQuaternary};\n    `,\n  ),\n  mobile: css`\n    padding-block: 0;\n    padding-inline: 16px;\n    border-radius: 0;\n    background: ${cssVar.colorBgContainer};\n  `,\n  outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n  root: css`\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n}));\n\nexport const flatGroupVariants = cva(flatGroupStyles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: flatGroupStyles.borderless,\n      filled: flatGroupStyles.filled,\n      outlined: flatGroupStyles.outlined,\n    },\n  },\n});\n\nexport const footerStyles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    ${responsive.sm} {\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const submitFooterStyles = createStaticStyles(({ css, cssVar }) => ({\n  floatFooter: css`\n    position: fixed;\n    z-index: 1000;\n    inset-block-end: 24px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 48px;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow: ${cssVar.boxShadowSecondary};\n  `,\n  footer: css`\n    ${responsive.sm} {\n      margin-block-start: calc(-1 * ${cssVar.borderRadius});\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const titleStyles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    position: relative;\n    text-align: start;\n  `,\n  desc: css`\n    display: block;\n\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 1.44;\n    color: ${cssVar.colorTextDescription};\n    word-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  title: css`\n    font-weight: 500;\n    line-height: 1;\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":"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"}

package/es/base-ui/Modal/style.mjs

@@ -1,3 +1,4 @@
+import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 //#region src/base-ui/Modal/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
@@ -44,10 +45,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       background: ${cssVar.colorFillSecondary};
     }
 
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};
-    }
+    ${focusRing};
   `,
 	closeInline: css`
     cursor: pointer;
@@ -74,10 +72,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       background: ${cssVar.colorFillSecondary};
     }
 
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};
-    }
+    ${focusRing};
   `,
 	content: css`
     overflow: hidden auto;
@@ -213,10 +208,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       background: ${cssVar.colorFillSecondary};
     }
 
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};
-    }
+    ${focusRing};
   `,
 	headerActions: css`
     display: flex;

package/es/base-ui/Modal/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Modal/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  backdrop: css`\n    position: fixed;\n    z-index: 1200;\n    inset: 0;\n\n    background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n\n    transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      opacity: 0;\n    }\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    position: absolute;\n    inset-block-start: 8px;\n    inset-inline-end: 12px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: 12px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:hover {\n      transform: scale(1.04);\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n    }\n  `,\n\n  closeInline: css`\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: 12px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:hover {\n      transform: scale(1.04);\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n    }\n  `,\n\n  content: css`\n    overflow: hidden auto;\n    padding-block: 0 16px;\n    padding-inline: 16px;\n  `,\n\n  contentNoHeader: css`\n    padding-block-start: 16px;\n  `,\n\n  footer: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-end;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n\n  header: css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    min-height: 48px;\n    padding-block: 8px;\n    padding-inline: 16px;\n  `,\n\n  headerDraggable: css`\n    cursor: default;\n    user-select: none;\n  `,\n\n  popup: css`\n    pointer-events: none;\n\n    position: fixed;\n    z-index: 1201;\n    inset: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  popupInner: css`\n    pointer-events: auto;\n\n    position: relative;\n\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    box-sizing: border-box;\n    width: calc(100% - 32px);\n    max-width: 520px;\n    max-height: calc(100dvh - 64px);\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 12px;\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadow};\n\n    transition:\n      transform 220ms cubic-bezier(0.32, 0.72, 0, 1),\n      opacity 220ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &[data-starting-style] {\n      transform: scale(0.97);\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transform: scale(0.98);\n      opacity: 0;\n      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n      transition-duration: 120ms;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.4;\n    color: ${cssVar.colorText};\n  `,\n\n  loadingSpinner: css`\n    @keyframes modal-spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    display: inline-block;\n\n    width: 14px;\n    height: 14px;\n    border: 2px solid currentcolor;\n    border-block-start-color: transparent;\n    border-radius: 50%;\n\n    animation: modal-spin 0.6s linear infinite;\n  `,\n\n  fullscreenPopupInner: css`\n    width: 100% !important;\n    max-width: 100% !important;\n    height: 100dvh !important;\n    max-height: 100dvh !important;\n    border: none;\n    border-radius: 12px;\n  `,\n\n  fullscreenToggle: css`\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 28px;\n    height: 28px;\n    padding: 0;\n    border: none;\n    border-radius: 12px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:hover {\n      transform: scale(1.04);\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n    }\n  `,\n\n  headerActions: css`\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    margin-inline-end: -4px;\n  `,\n\n  denyAnimation: css`\n    @keyframes modal-deny {\n      0%,\n      100% {\n        transform: translateX(0);\n      }\n\n      20% {\n        transform: translateX(-5px);\n      }\n\n      40% {\n        transform: translateX(5px);\n      }\n\n      60% {\n        transform: translateX(-3px);\n      }\n\n      80% {\n        transform: translateX(2px);\n      }\n    }\n\n    animation: modal-deny 280ms cubic-bezier(0.36, 0.66, 0.04, 1);\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 1200;\n    inset: 0;\n    overflow: auto;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;qCAKsB,OAAO,iBAAiB;;;;;;;;;CAU3D,OAAO,GAAG;;;;;;;;;;;;;;;;;aAiBC,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;8BAKhB,OAAO,mBAAmB;;;CAItD,aAAa,GAAG;;;;;;;;;;;;;aAaL,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;8BAKhB,OAAO,mBAAmB;;;CAItD,SAAS,GAAG;;;;;CAMZ,iBAAiB,GAAG;;;CAIpB,QAAQ,GAAG;;;;;;;;;CAUX,QAAQ,GAAG;;;;;;;;;CAUX,iBAAiB,GAAG;;;;CAKpB,OAAO,GAAG;;;;;;;;;;;CAYV,YAAY,GAAG;;;;;;;;;;;;;wBAaO,OAAO,qBAAqB;;;kBAGlC,OAAO,gBAAgB;kBACvB,OAAO,UAAU;;;;;;;;;;;;;;;;;;CAmBjC,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,gBAAgB,GAAG;;;;;;;;;;;;;;;;;CAkBnB,sBAAsB,GAAG;;;;;;;;CASzB,kBAAkB,GAAG;;;;;;;;;;;;;aAaV,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;8BAKhB,OAAO,mBAAmB;;;CAItD,eAAe,GAAG;;;;;;CAOlB,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BlB,UAAU,GAAG;;;;;;AAMf,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Modal/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  backdrop: css`\n    position: fixed;\n    z-index: 1200;\n    inset: 0;\n\n    background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n\n    transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      opacity: 0;\n    }\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    position: absolute;\n    inset-block-start: 8px;\n    inset-inline-end: 12px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: 12px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:hover {\n      transform: scale(1.04);\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    ${focusRing};\n  `,\n\n  closeInline: css`\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: 12px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:hover {\n      transform: scale(1.04);\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    ${focusRing};\n  `,\n\n  content: css`\n    overflow: hidden auto;\n    padding-block: 0 16px;\n    padding-inline: 16px;\n  `,\n\n  contentNoHeader: css`\n    padding-block-start: 16px;\n  `,\n\n  footer: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-end;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n\n  header: css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    min-height: 48px;\n    padding-block: 8px;\n    padding-inline: 16px;\n  `,\n\n  headerDraggable: css`\n    cursor: default;\n    user-select: none;\n  `,\n\n  popup: css`\n    pointer-events: none;\n\n    position: fixed;\n    z-index: 1201;\n    inset: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  popupInner: css`\n    pointer-events: auto;\n\n    position: relative;\n\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    box-sizing: border-box;\n    width: calc(100% - 32px);\n    max-width: 520px;\n    max-height: calc(100dvh - 64px);\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 12px;\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadow};\n\n    transition:\n      transform 220ms cubic-bezier(0.32, 0.72, 0, 1),\n      opacity 220ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &[data-starting-style] {\n      transform: scale(0.97);\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transform: scale(0.98);\n      opacity: 0;\n      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n      transition-duration: 120ms;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1.4;\n    color: ${cssVar.colorText};\n  `,\n\n  loadingSpinner: css`\n    @keyframes modal-spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    display: inline-block;\n\n    width: 14px;\n    height: 14px;\n    border: 2px solid currentcolor;\n    border-block-start-color: transparent;\n    border-radius: 50%;\n\n    animation: modal-spin 0.6s linear infinite;\n  `,\n\n  fullscreenPopupInner: css`\n    width: 100% !important;\n    max-width: 100% !important;\n    height: 100dvh !important;\n    max-height: 100dvh !important;\n    border: none;\n    border-radius: 12px;\n  `,\n\n  fullscreenToggle: css`\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 28px;\n    height: 28px;\n    padding: 0;\n    border: none;\n    border-radius: 12px;\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    &:hover {\n      transform: scale(1.04);\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    ${focusRing};\n  `,\n\n  headerActions: css`\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    margin-inline-end: -4px;\n  `,\n\n  denyAnimation: css`\n    @keyframes modal-deny {\n      0%,\n      100% {\n        transform: translateX(0);\n      }\n\n      20% {\n        transform: translateX(-5px);\n      }\n\n      40% {\n        transform: translateX(5px);\n      }\n\n      60% {\n        transform: translateX(-3px);\n      }\n\n      80% {\n        transform: translateX(2px);\n      }\n    }\n\n    animation: modal-deny 280ms cubic-bezier(0.36, 0.66, 0.04, 1);\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 1200;\n    inset: 0;\n    overflow: auto;\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;qCAKsB,OAAO,iBAAiB;;;;;;;;;CAU3D,OAAO,GAAG;;;;;;;;;;;;;;;;;aAiBC,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;MAGxC,UAAU;;CAGd,aAAa,GAAG;;;;;;;;;;;;;aAaL,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;MAGxC,UAAU;;CAGd,SAAS,GAAG;;;;;CAMZ,iBAAiB,GAAG;;;CAIpB,QAAQ,GAAG;;;;;;;;;CAUX,QAAQ,GAAG;;;;;;;;;CAUX,iBAAiB,GAAG;;;;CAKpB,OAAO,GAAG;;;;;;;;;;;CAYV,YAAY,GAAG;;;;;;;;;;;;;wBAaO,OAAO,qBAAqB;;;kBAGlC,OAAO,gBAAgB;kBACvB,OAAO,UAAU;;;;;;;;;;;;;;;;;;CAmBjC,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,gBAAgB,GAAG;;;;;;;;;;;;;;;;;CAkBnB,sBAAsB,GAAG;;;;;;;;CASzB,kBAAkB,GAAG;;;;;;;;;;;;;aAaV,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;MAGxC,UAAU;;CAGd,eAAe,GAAG;;;;;;CAOlB,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BlB,UAAU,GAAG;;;;;;AAMf,EAAE"}

package/es/base-ui/Radio/style.mjs

@@ -1,3 +1,4 @@
+import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 //#region src/base-ui/Radio/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
@@ -43,10 +44,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       border-color: ${cssVar.colorBorder};
     }
 
-    &:focus-visible {
-      outline: 2px solid ${cssVar.colorPrimaryBorder};
-      outline-offset: 1px;
-    }
+    ${focusRing};
 
     &[data-checked] {
       border-color: var(--lobe-radio-bg, ${cssVar.colorPrimary});

package/es/base-ui/Radio/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Radio/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    display: block;\n    flex: none;\n    border-radius: 50%;\n    background: currentcolor;\n  `,\n  label: css`\n    cursor: pointer;\n    user-select: none;\n    display: inline-flex;\n    align-items: center;\n\n    &:has([data-disabled]) {\n      cursor: not-allowed;\n    }\n  `,\n  root: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 50%;\n\n    color: ${cssVar.colorBgLayout};\n\n    background: ${cssVar.colorBgContainer};\n    outline: none;\n\n    transition:\n      background 150ms ${cssVar.motionEaseOut},\n      border-color 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled], [data-checked]) {\n      border-color: ${cssVar.colorBorder};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &[data-checked] {\n      border-color: var(--lobe-radio-bg, ${cssVar.colorPrimary});\n      background: var(--lobe-radio-bg, ${cssVar.colorPrimary});\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n\n      border-color: ${cssVar.colorFill};\n\n      color: ${cssVar.colorText};\n\n      opacity: 0.25;\n      background: ${cssVar.colorFill};\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;CAMd,OAAO,GAAG;;;;;;;;;;CAUV,MAAM,GAAG;;;;;;;;;;wBAUa,OAAO,qBAAqB;;;aAGvC,OAAO,cAAc;;kBAEhB,OAAO,iBAAiB;;;;yBAIjB,OAAO,cAAc;2BACnB,OAAO,cAAc;;;sBAG1B,OAAO,YAAY;;;;2BAId,OAAO,mBAAmB;;;;;2CAKV,OAAO,aAAa;yCACtB,OAAO,aAAa;;;;;;sBAMvC,OAAO,UAAU;;eAExB,OAAO,UAAU;;;oBAGZ,OAAO,UAAU;;;AAGrC,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Radio/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    display: block;\n    flex: none;\n    border-radius: 50%;\n    background: currentcolor;\n  `,\n  label: css`\n    cursor: pointer;\n    user-select: none;\n    display: inline-flex;\n    align-items: center;\n\n    &:has([data-disabled]) {\n      cursor: not-allowed;\n    }\n  `,\n  root: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 50%;\n\n    color: ${cssVar.colorBgLayout};\n\n    background: ${cssVar.colorBgContainer};\n    outline: none;\n\n    transition:\n      background 150ms ${cssVar.motionEaseOut},\n      border-color 150ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled], [data-checked]) {\n      border-color: ${cssVar.colorBorder};\n    }\n\n    ${focusRing};\n\n    &[data-checked] {\n      border-color: var(--lobe-radio-bg, ${cssVar.colorPrimary});\n      background: var(--lobe-radio-bg, ${cssVar.colorPrimary});\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n\n      border-color: ${cssVar.colorFill};\n\n      color: ${cssVar.colorText};\n\n      opacity: 0.25;\n      background: ${cssVar.colorFill};\n    }\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;CAMd,OAAO,GAAG;;;;;;;;;;CAUV,MAAM,GAAG;;;;;;;;;;wBAUa,OAAO,qBAAqB;;;aAGvC,OAAO,cAAc;;kBAEhB,OAAO,iBAAiB;;;;yBAIjB,OAAO,cAAc;2BACnB,OAAO,cAAc;;;sBAG1B,OAAO,YAAY;;;MAGnC,UAAU;;;2CAG2B,OAAO,aAAa;yCACtB,OAAO,aAAa;;;;;;sBAMvC,OAAO,UAAU;;eAExB,OAAO,UAAU;;;oBAGZ,OAAO,UAAU;;;AAGrC,EAAE"}

package/es/base-ui/ScrollArea/style.mjs

@@ -1,3 +1,4 @@
+import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 //#region src/base-ui/ScrollArea/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
@@ -76,10 +77,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     height: 100%;
     outline: none;
 
-    &:focus-visible {
-      outline: 2px solid ${cssVar.colorPrimary};
-      outline-offset: 2px;
-    }
+    ${focusRing};
   `,
 	viewportFade: css`
     --scroll-area-overflow-y-start: inherit;

package/es/base-ui/ScrollArea/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    font-size: ${cssVar.fontSizeSM};\n    line-height: 1.375rem;\n    color: ${cssVar.colorText};\n  `,\n\n  corner: css`\n    background: ${cssVar.colorFillSecondary};\n  `,\n\n  root: css`\n    position: relative;\n    box-sizing: border-box;\n  `,\n\n  scrollbar: css`\n    pointer-events: none;\n\n    margin: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    opacity: 0;\n    background: transparent;\n\n    transition: opacity 150ms;\n\n    &::before {\n      content: '';\n      position: absolute;\n    }\n\n    &[data-scrolling] {\n      transition-duration: 0ms;\n    }\n\n    &[data-hovering],\n    &[data-scrolling] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n\n    &[data-orientation='vertical'] {\n      width: 4px;\n\n      &::before {\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n        width: 20px;\n        height: 100%;\n      }\n    }\n\n    &[data-orientation='horizontal'] {\n      height: 4px;\n\n      &::before {\n        inset-block-end: -8px;\n        inset-inline: 0;\n        width: 100%;\n        height: 20px;\n      }\n    }\n  `,\n\n  thumb: css`\n    width: 100%;\n    height: 100%;\n    border-radius: inherit;\n    background: ${cssVar.colorTextQuaternary};\n  `,\n\n  viewport: css`\n    position: relative;\n    height: 100%;\n    outline: none;\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimary};\n      outline-offset: 2px;\n    }\n  `,\n\n  viewportFade: css`\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to bottom,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-top),\n      #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching top/bottom doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-top-in {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-top-in, lobe-scroll-area-fade-bottom-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self y), scroll(self y);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeHorizontal: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-left: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --lobe-scroll-area-fade-right: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to right,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-left),\n      #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching start/end doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-left-in {\n        from {\n          --lobe-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-right-out {\n        from {\n          --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-left-in, lobe-scroll-area-fade-right-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeBoth: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n    --lobe-scroll-area-fade-left: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --lobe-scroll-area-fade-right: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    mask-composite: intersect;\n\n    /*\n     * Combine vertical + horizontal fades by intersecting two gradient masks\n     * so the four corners stay transparent only when both axes overflow.\n     */\n    mask-image:\n      linear-gradient(\n        to bottom,\n        transparent 0,\n        #000 var(--lobe-scroll-area-fade-top),\n        #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n        transparent 100%\n      ),\n      linear-gradient(\n        to right,\n        transparent 0,\n        #000 var(--lobe-scroll-area-fade-left),\n        #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n        transparent 100%\n      );\n    mask-repeat: no-repeat, no-repeat;\n    mask-size:\n      100% 100%,\n      100% 100%;\n\n    @supports (animation-timeline: scroll()) {\n      @keyframes lobe-scroll-area-fade-top-in-both {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out-both {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-left-in-both {\n        from {\n          --lobe-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-right-out-both {\n        from {\n          --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name:\n        lobe-scroll-area-fade-top-in-both, lobe-scroll-area-fade-bottom-out-both,\n        lobe-scroll-area-fade-left-in-both, lobe-scroll-area-fade-right-out-both;\n      animation-duration: 1ms, 1ms, 1ms, 1ms;\n      animation-timing-function: linear, linear, linear, linear;\n      animation-fill-mode: both, both, both, both;\n      animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%,\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;;iBAKG,OAAO,WAAW;;aAEtB,OAAO,UAAU;;CAG5B,QAAQ,GAAG;kBACK,OAAO,mBAAmB;;CAG1C,MAAM,GAAG;;;;CAKT,WAAW,GAAG;;;;qBAIK,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CzC,OAAO,GAAG;;;;kBAIM,OAAO,oBAAoB;;CAG3C,UAAU,GAAG;;;;;;2BAMY,OAAO,aAAa;;;;CAK7C,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DjB,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8D3B,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyGvB,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    font-size: ${cssVar.fontSizeSM};\n    line-height: 1.375rem;\n    color: ${cssVar.colorText};\n  `,\n\n  corner: css`\n    background: ${cssVar.colorFillSecondary};\n  `,\n\n  root: css`\n    position: relative;\n    box-sizing: border-box;\n  `,\n\n  scrollbar: css`\n    pointer-events: none;\n\n    margin: 8px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    opacity: 0;\n    background: transparent;\n\n    transition: opacity 150ms;\n\n    &::before {\n      content: '';\n      position: absolute;\n    }\n\n    &[data-scrolling] {\n      transition-duration: 0ms;\n    }\n\n    &[data-hovering],\n    &[data-scrolling] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n\n    &[data-orientation='vertical'] {\n      width: 4px;\n\n      &::before {\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n        width: 20px;\n        height: 100%;\n      }\n    }\n\n    &[data-orientation='horizontal'] {\n      height: 4px;\n\n      &::before {\n        inset-block-end: -8px;\n        inset-inline: 0;\n        width: 100%;\n        height: 20px;\n      }\n    }\n  `,\n\n  thumb: css`\n    width: 100%;\n    height: 100%;\n    border-radius: inherit;\n    background: ${cssVar.colorTextQuaternary};\n  `,\n\n  viewport: css`\n    position: relative;\n    height: 100%;\n    outline: none;\n\n    ${focusRing};\n  `,\n\n  viewportFade: css`\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to bottom,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-top),\n      #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching top/bottom doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-top-in {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-top-in, lobe-scroll-area-fade-bottom-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self y), scroll(self y);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeHorizontal: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-left: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --lobe-scroll-area-fade-right: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to right,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-left),\n      #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching start/end doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-left-in {\n        from {\n          --lobe-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-right-out {\n        from {\n          --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-left-in, lobe-scroll-area-fade-right-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeBoth: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n    --lobe-scroll-area-fade-left: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --lobe-scroll-area-fade-right: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    mask-composite: intersect;\n\n    /*\n     * Combine vertical + horizontal fades by intersecting two gradient masks\n     * so the four corners stay transparent only when both axes overflow.\n     */\n    mask-image:\n      linear-gradient(\n        to bottom,\n        transparent 0,\n        #000 var(--lobe-scroll-area-fade-top),\n        #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n        transparent 100%\n      ),\n      linear-gradient(\n        to right,\n        transparent 0,\n        #000 var(--lobe-scroll-area-fade-left),\n        #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n        transparent 100%\n      );\n    mask-repeat: no-repeat, no-repeat;\n    mask-size:\n      100% 100%,\n      100% 100%;\n\n    @supports (animation-timeline: scroll()) {\n      @keyframes lobe-scroll-area-fade-top-in-both {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out-both {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-left-in-both {\n        from {\n          --lobe-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-right-out-both {\n        from {\n          --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name:\n        lobe-scroll-area-fade-top-in-both, lobe-scroll-area-fade-bottom-out-both,\n        lobe-scroll-area-fade-left-in-both, lobe-scroll-area-fade-right-out-both;\n      animation-duration: 1ms, 1ms, 1ms, 1ms;\n      animation-timing-function: linear, linear, linear, linear;\n      animation-fill-mode: both, both, both, both;\n      animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%,\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;;iBAKG,OAAO,WAAW;;aAEtB,OAAO,UAAU;;CAG5B,QAAQ,GAAG;kBACK,OAAO,mBAAmB;;CAG1C,MAAM,GAAG;;;;CAKT,WAAW,GAAG;;;;qBAIK,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CzC,OAAO,GAAG;;;;kBAIM,OAAO,oBAAoB;;CAG3C,UAAU,GAAG;;;;;MAKT,UAAU;;CAGd,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DjB,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8D3B,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyGvB,EAAE"}

package/es/base-ui/Segmented/style.mjs

@@ -1,4 +1,5 @@
 import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/Segmented/style.ts
@@ -65,11 +66,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       transform: scale(0.98);
     }
 
-    &:focus-visible {
-      border-radius: ${cssVar.borderRadius};
-      outline: 2px solid ${cssVar.colorPrimaryBorder};
-      outline-offset: -2px;
-    }
+    border-radius: ${cssVar.borderRadius};
+    ${focusRing};
 
     &[data-pressed] {
       color: ${cssVar.colorText};

package/es/base-ui/Segmented/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Segmented/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n    inset-block-start: var(--active-item-top);\n    inset-inline-start: var(--active-item-left);\n\n    width: var(--active-item-width);\n    height: var(--active-item-height);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    transition-timing-function: ${cssVar.motionEaseOut};\n    transition-duration: 240ms;\n    transition-property: inset-inline-start, inset-block-start, width, height;\n\n    [data-orientation='horizontal'] &:dir(rtl) {\n      inset-inline-start: var(--active-item-right);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  item: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n    z-index: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 0;\n\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n\n    background: transparent;\n    outline: none;\n\n    transition:\n      color 120ms ${cssVar.motionEaseOut},\n      transform 120ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled], [data-pressed]) {\n      color: ${cssVar.colorText};\n    }\n\n    &:active:not([data-disabled]) {\n      transform: scale(0.98);\n    }\n\n    &:focus-visible {\n      border-radius: ${cssVar.borderRadius};\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n\n    &[data-pressed] {\n      color: ${cssVar.colorText};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  itemBlock: css`\n    flex: 1 1 0;\n  `,\n  itemIcon: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  itemLabel: css`\n    display: inline-flex;\n    align-items: center;\n  `,\n  itemLarge: css`\n    height: 36px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n  itemMiddle: css`\n    height: 32px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 13px;\n  `,\n  itemSmall: css`\n    height: 26px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 12px;\n  `,\n  list: css`\n    position: relative;\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    gap: 4px;\n    align-items: center;\n    align-self: flex-start;\n\n    box-sizing: border-box;\n    padding: 3px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    &[data-orientation='vertical'] {\n      flex-direction: column;\n      align-items: stretch;\n      align-self: stretch;\n    }\n  `,\n  listBlock: css`\n    display: flex;\n    align-self: stretch;\n    width: 100%;\n  `,\n  listFilled: css`\n    border: 1px solid ${cssVar.colorFillQuaternary};\n    background: ${cssVar.colorBgLayout};\n  `,\n  listGlass: lobeStaticStylish.blur,\n  listOutlined: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    background: transparent;\n  `,\n  listShadow: lobeStaticStylish.shadow,\n  root: css`\n    display: inline-flex;\n\n    &[data-block='true'] {\n      display: flex;\n      width: 100%;\n    }\n  `,\n}));\n\nexport const listVariants = cva(styles.list, {\n  defaultVariants: {\n    block: false,\n    glass: false,\n    shadow: false,\n    variant: 'filled',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.listBlock,\n    },\n    glass: {\n      false: null,\n      true: styles.listGlass,\n    },\n    shadow: {\n      false: null,\n      true: styles.listShadow,\n    },\n    variant: {\n      filled: styles.listFilled,\n      outlined: styles.listOutlined,\n    },\n  },\n});\n\nexport const itemVariants = cva(styles.item, {\n  defaultVariants: {\n    block: false,\n    size: 'middle',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.itemBlock,\n    },\n    size: {\n      large: styles.itemLarge,\n      middle: styles.itemMiddle,\n      small: styles.itemSmall,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;;;;;qBAUK,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;kCAET,OAAO,cAAc;;;;;;;;;;;;CAYrD,MAAM,GAAG;;;;;;;;;;;;;;;;;aAiBE,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;;uBAQT,OAAO,aAAa;2BAChB,OAAO,mBAAmB;;;;;eAKtC,OAAO,UAAU;;;;;eAKjB,OAAO,kBAAkB;;;;;;;CAOtC,WAAW,GAAG;;;CAGd,UAAU,GAAG;;;;;CAKb,WAAW,GAAG;;;;CAId,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,YAAY,GAAG;;;qBAGI,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,MAAM,GAAG;;;;;;;;;;;qBAWU,OAAO,eAAe;;;;;;;;CAQzC,WAAW,GAAG;;;;;CAKd,YAAY,GAAG;wBACO,OAAO,oBAAoB;kBACjC,OAAO,cAAc;;CAErC,WAAWA,cAAkB;CAC7B,cAAc,GAAG;wBACK,OAAO,qBAAqB;;;CAGlD,YAAYA,cAAkB;CAC9B,MAAM,GAAG;;;;;;;;AAQX,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,OAAO;EACP,QAAQ;EACR,SAAS;CACX;CACA,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,MAAM;CACR;CACA,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Segmented/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n    inset-block-start: var(--active-item-top);\n    inset-inline-start: var(--active-item-left);\n\n    width: var(--active-item-width);\n    height: var(--active-item-height);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    transition-timing-function: ${cssVar.motionEaseOut};\n    transition-duration: 240ms;\n    transition-property: inset-inline-start, inset-block-start, width, height;\n\n    [data-orientation='horizontal'] &:dir(rtl) {\n      inset-inline-start: var(--active-item-right);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  item: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n    z-index: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 0;\n\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n\n    background: transparent;\n    outline: none;\n\n    transition:\n      color 120ms ${cssVar.motionEaseOut},\n      transform 120ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled], [data-pressed]) {\n      color: ${cssVar.colorText};\n    }\n\n    &:active:not([data-disabled]) {\n      transform: scale(0.98);\n    }\n\n    border-radius: ${cssVar.borderRadius};\n    ${focusRing};\n\n    &[data-pressed] {\n      color: ${cssVar.colorText};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  itemBlock: css`\n    flex: 1 1 0;\n  `,\n  itemIcon: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  itemLabel: css`\n    display: inline-flex;\n    align-items: center;\n  `,\n  itemLarge: css`\n    height: 36px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n  itemMiddle: css`\n    height: 32px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 13px;\n  `,\n  itemSmall: css`\n    height: 26px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 12px;\n  `,\n  list: css`\n    position: relative;\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    gap: 4px;\n    align-items: center;\n    align-self: flex-start;\n\n    box-sizing: border-box;\n    padding: 3px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    &[data-orientation='vertical'] {\n      flex-direction: column;\n      align-items: stretch;\n      align-self: stretch;\n    }\n  `,\n  listBlock: css`\n    display: flex;\n    align-self: stretch;\n    width: 100%;\n  `,\n  listFilled: css`\n    border: 1px solid ${cssVar.colorFillQuaternary};\n    background: ${cssVar.colorBgLayout};\n  `,\n  listGlass: lobeStaticStylish.blur,\n  listOutlined: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    background: transparent;\n  `,\n  listShadow: lobeStaticStylish.shadow,\n  root: css`\n    display: inline-flex;\n\n    &[data-block='true'] {\n      display: flex;\n      width: 100%;\n    }\n  `,\n}));\n\nexport const listVariants = cva(styles.list, {\n  defaultVariants: {\n    block: false,\n    glass: false,\n    shadow: false,\n    variant: 'filled',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.listBlock,\n    },\n    glass: {\n      false: null,\n      true: styles.listGlass,\n    },\n    shadow: {\n      false: null,\n      true: styles.listShadow,\n    },\n    variant: {\n      filled: styles.listFilled,\n      outlined: styles.listOutlined,\n    },\n  },\n});\n\nexport const itemVariants = cva(styles.item, {\n  defaultVariants: {\n    block: false,\n    size: 'middle',\n  },\n  variants: {\n    block: {\n      false: null,\n      true: styles.itemBlock,\n    },\n    size: {\n      large: styles.itemLarge,\n      middle: styles.itemMiddle,\n      small: styles.itemSmall,\n    },\n  },\n});\n"],"mappings":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;;;;;qBAUK,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;kCAET,OAAO,cAAc;;;;;;;;;;;;CAYrD,MAAM,GAAG;;;;;;;;;;;;;;;;;aAiBE,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;qBAOX,OAAO,aAAa;MACnC,UAAU;;;eAGD,OAAO,UAAU;;;;;eAKjB,OAAO,kBAAkB;;;;;;;CAOtC,WAAW,GAAG;;;CAGd,UAAU,GAAG;;;;;CAKb,WAAW,GAAG;;;;CAId,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,YAAY,GAAG;;;qBAGI,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,MAAM,GAAG;;;;;;;;;;;qBAWU,OAAO,eAAe;;;;;;;;CAQzC,WAAW,GAAG;;;;;CAKd,YAAY,GAAG;wBACO,OAAO,oBAAoB;kBACjC,OAAO,cAAc;;CAErC,WAAWA,cAAkB;CAC7B,cAAc,GAAG;wBACK,OAAO,qBAAqB;;;CAGlD,YAAYA,cAAkB;CAC9B,MAAM,GAAG;;;;;;;;AAQX,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,OAAO;EACP,QAAQ;EACR,SAAS;CACX;CACA,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,MAAM;CACR;CACA,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;CACF;AACF,CAAC"}

package/es/base-ui/Select/style.mjs

@@ -1,5 +1,6 @@
 import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
 import { controlHeight } from "../controlSize.mjs";
+import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles, cx } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/Select/style.ts
@@ -238,10 +239,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       background: var(--lobe-select-open-bg, ${cssVar.colorFillTertiary});
     }
 
-    &:focus-visible {
-      outline: 2px solid ${cssVar.colorPrimaryBorder};
-      outline-offset: 1px;
-    }
+    ${focusRing};
 
     &:hover [data-role='lobe-select-clear'] {
       opacity: 1;

package/es/base-ui/Select/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Select/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    display: flex;\n    width: 12px;\n    height: 6px;\n\n    & > svg {\n      width: 100%;\n      height: 100%;\n    }\n  `,\n  borderless: cx(\n    lobeStaticStylish.variantBorderless,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillTertiary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent);\n    `,\n  ),\n  clear: css`\n    display: inline-flex;\n    align-items: center;\n\n    color: ${cssVar.colorTextTertiary};\n\n    opacity: 0;\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      color: ${cssVar.colorTextSecondary};\n    }\n  `,\n  empty: css``,\n  filled: cx(\n    lobeStaticStylish.variantFilled,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillSecondary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent);\n    `,\n  ),\n  group: css``,\n  groupLabel: css``,\n  icon: css`\n    display: inline-flex;\n    align-items: center;\n    transition: transform 150ms ${cssVar.motionEaseOut};\n\n    &[data-popup-open] {\n      transform: rotate(180deg);\n    }\n  `,\n  item: css``,\n  itemBoldSelected: css`\n    &[data-selected] {\n      font-weight: 600;\n    }\n  `,\n  itemIndicator: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-inline-start: auto;\n    padding-inline-start: 8px;\n\n    color: ${cssVar.colorPrimary};\n  `,\n  itemText: css``,\n  list: css`\n    overflow-y: auto;\n    flex: 1;\n\n    min-height: 0;\n    max-height: var(--lobe-select-available-height, var(--available-height));\n    padding-block: 0;\n  `,\n  listWithSearch: css`\n    padding-block-start: 4px;\n  `,\n  outlined: cx(\n    lobeStaticStylish.variantOutlined,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillTertiary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorBgContainer} 75%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n    `,\n  ),\n  popup: css`\n    --lobe-select-available-height: min(\n      var(--available-height),\n      var(--lobe-select-popup-max-height, var(--available-height))\n    );\n\n    transform-origin: var(--transform-origin);\n\n    display: flex;\n    flex-direction: column;\n\n    box-sizing: border-box;\n\n    transition:\n      opacity 150ms ${cssVar.motionEaseOut},\n      transform 150ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: scaleY(0.92);\n      opacity: 0;\n    }\n  `,\n  positioner: css`\n    z-index: 1100;\n    outline: none;\n  `,\n  prefix: css`\n    display: inline-flex;\n    align-items: center;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  scrollArrow: css`\n    cursor: default;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 16px;\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorBgElevated};\n  `,\n  search: css`\n    cursor: text;\n\n    display: flex;\n    align-items: center;\n\n    min-height: 36px;\n    margin-inline: -4px;\n    padding-block: 8px;\n    padding-inline: 12px;\n    border-block-end: 1px solid ${cssVar.colorFillSecondary};\n  `,\n  searchInput: css`\n    flex: 1;\n\n    min-width: 0;\n    padding-block: 0;\n    padding-inline: 4px;\n    border: 0;\n\n    font-size: 14px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    background: transparent;\n    outline: none;\n\n    &::placeholder {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  shadow: lobeStaticStylish.shadow,\n  suffix: css`\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  tag: css`\n    display: inline-flex;\n    align-items: center;\n\n    max-width: 100%;\n    padding-block: 0;\n    padding-inline: 6px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  tagClose: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-inline-start: 4px;\n\n    color: ${cssVar.colorTextSecondary};\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n  `,\n  tags: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n  `,\n  tagsValue: css`\n    /* No growing, so an empty trigger leaves the inline input the full width — but it must\n       still shrink, or the tags stay at max-content and run off the trigger instead of wrapping. */\n    flex: 0 1 auto;\n  `,\n  tagsSearch: css`\n    display: flex;\n    flex: 1;\n    min-width: 48px;\n  `,\n  trigger: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid transparent;\n    border-radius: ${cssVar.borderRadius};\n\n    font-family: inherit;\n    color: ${cssVar.colorText};\n\n    background: transparent;\n    outline: none;\n\n    transition: all 150ms ${cssVar.motionEaseOut};\n\n    &:not([data-disabled], [data-readonly])[data-popup-open],\n    &:not([data-disabled], [data-readonly])[data-open],\n    &:not([data-disabled], [data-readonly])[data-state='open'],\n    &:not([data-disabled], [data-readonly])[aria-expanded='true'] {\n      background: var(--lobe-select-open-bg, ${cssVar.colorFillTertiary});\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &:hover [data-role='lobe-select-clear'] {\n      opacity: 1;\n    }\n\n    &[data-placeholder] [data-role='lobe-select-clear'] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n      background: var(--lobe-select-disabled-bg, transparent);\n\n      &:hover {\n        background: var(--lobe-select-disabled-bg, transparent);\n      }\n    }\n\n    &[data-readonly] {\n      cursor: default;\n      color: ${cssVar.colorTextSecondary};\n      background: var(--lobe-select-readonly-bg, transparent);\n\n      &:hover {\n        background: var(--lobe-select-readonly-bg, transparent);\n      }\n    }\n\n    &[data-disabled] [data-role='lobe-select-clear'] {\n      pointer-events: none;\n      opacity: 0;\n    }\n  `,\n  triggerLarge: css`\n    min-height: ${controlHeight.large}px;\n    padding-block: 6px;\n    padding-inline: 12px;\n\n    font-size: 16px;\n    line-height: 24px;\n  `,\n  triggerMiddle: css`\n    min-height: ${controlHeight.middle}px;\n    padding-block: 4px;\n    padding-inline: 11px;\n\n    font-size: 14px;\n    line-height: 20px;\n  `,\n  triggerSmall: css`\n    min-height: ${controlHeight.small}px;\n    padding-block: 0;\n    padding-inline: 8px;\n\n    font-size: 12px;\n    line-height: 18px;\n  `,\n  value: css`\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n\n    min-width: 0;\n\n    color: inherit;\n\n    &[data-placeholder] {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  valueText: css`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n\nexport const triggerVariants = cva(styles.trigger, {\n  defaultVariants: {\n    shadow: false,\n    size: 'middle',\n    variant: 'outlined',\n  },\n  variants: {\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    size: {\n      large: styles.triggerLarge,\n      middle: styles.triggerMiddle,\n      small: styles.triggerSmall,\n    },\n    variant: {\n      borderless: styles.borderless,\n      filled: styles.filled,\n      outlined: styles.outlined,\n    },\n  },\n});\n"],"mappings":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;CAUV,YAAY,GACVA,cAAkB,mBAClB,GAAG;+BACwB,OAAO,kBAAkB;sDACF,OAAO,kBAAkB;sDACzB,OAAO,kBAAkB;KAE7E;CACA,OAAO,GAAG;;;;aAIC,OAAO,kBAAkB;;;;gCAIN,OAAO,cAAc;;;eAGtC,OAAO,mBAAmB;;;CAGvC,OAAO,GAAG;CACV,QAAQ,GACNA,cAAkB,eAClB,GAAG;+BACwB,OAAO,mBAAmB;sDACH,OAAO,kBAAkB;sDACzB,OAAO,kBAAkB;KAE7E;CACA,OAAO,GAAG;CACV,YAAY,GAAG;CACf,MAAM,GAAG;;;kCAGuB,OAAO,cAAc;;;;;;CAMrD,MAAM,GAAG;CACT,kBAAkB,GAAG;;;;;CAKrB,eAAe,GAAG;;;;;;;;aAQP,OAAO,aAAa;;CAE/B,UAAU,GAAG;CACb,MAAM,GAAG;;;;;;;;CAQT,gBAAgB,GAAG;;;CAGnB,UAAU,GACRA,cAAkB,iBAClB,GAAG;+BACwB,OAAO,kBAAkB;sDACF,OAAO,iBAAiB;sDACxB,OAAO,iBAAiB;KAE5E;CACA,OAAO,GAAG;;;;;;;;;;;;;;sBAcU,OAAO,cAAc;wBACnB,OAAO,cAAc;;;;;;;;CAQ3C,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;;aAGA,OAAO,mBAAmB;;CAErC,aAAa,GAAG;;;;;;;;;aASL,OAAO,mBAAmB;;kBAErB,OAAO,gBAAgB;;CAEvC,QAAQ,GAAG;;;;;;;;;;kCAUqB,OAAO,mBAAmB;;CAE1D,aAAa,GAAG;;;;;;;;;;aAUL,OAAO,UAAU;;;;;;eAMf,OAAO,qBAAqB;;;CAGzC,QAAQA,cAAkB;CAC1B,QAAQ,GAAG;;;;aAIA,OAAO,mBAAmB;;CAErC,KAAK,GAAG;;;;;;;qBAOW,OAAO,eAAe;;;;aAI9B,OAAO,UAAU;;kBAEZ,OAAO,kBAAkB;;CAEzC,UAAU,GAAG;;;;;;;;;aASF,OAAO,mBAAmB;;gCAEP,OAAO,cAAc;;CAEnD,MAAM,GAAG;;;;;;CAMT,WAAW,GAAG;;;;;CAKd,YAAY,GAAG;;;;;CAKf,SAAS,GAAG;;;;;;;;;;;qBAWO,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;;;4BAKF,OAAO,cAAc;;;;;;+CAMF,OAAO,kBAAkB;;;;2BAI7C,OAAO,mBAAmB;;;;;;;;;;;;;;;eAetC,OAAO,kBAAkB;;;;;;;;;;eAUzB,OAAO,mBAAmB;;;;;;;;;;;;;CAavC,cAAc,GAAG;kBACD,cAAc,MAAM;;;;;;;CAOpC,eAAe,GAAG;kBACF,cAAc,OAAO;;;;;;;CAOrC,cAAc,GAAG;kBACD,cAAc,MAAM;;;;;;;CAOpC,OAAO,GAAG;;;;;;;;;;;;eAYG,OAAO,qBAAqB;;;CAGzC,WAAW,GAAG;;;;;AAKhB,EAAE;AAEF,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Select/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { focusRing } from '@/base-ui/focusRing';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    display: flex;\n    width: 12px;\n    height: 6px;\n\n    & > svg {\n      width: 100%;\n      height: 100%;\n    }\n  `,\n  borderless: cx(\n    lobeStaticStylish.variantBorderless,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillTertiary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent);\n    `,\n  ),\n  clear: css`\n    display: inline-flex;\n    align-items: center;\n\n    color: ${cssVar.colorTextTertiary};\n\n    opacity: 0;\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      color: ${cssVar.colorTextSecondary};\n    }\n  `,\n  empty: css``,\n  filled: cx(\n    lobeStaticStylish.variantFilled,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillSecondary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent);\n    `,\n  ),\n  group: css``,\n  groupLabel: css``,\n  icon: css`\n    display: inline-flex;\n    align-items: center;\n    transition: transform 150ms ${cssVar.motionEaseOut};\n\n    &[data-popup-open] {\n      transform: rotate(180deg);\n    }\n  `,\n  item: css``,\n  itemBoldSelected: css`\n    &[data-selected] {\n      font-weight: 600;\n    }\n  `,\n  itemIndicator: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-inline-start: auto;\n    padding-inline-start: 8px;\n\n    color: ${cssVar.colorPrimary};\n  `,\n  itemText: css``,\n  list: css`\n    overflow-y: auto;\n    flex: 1;\n\n    min-height: 0;\n    max-height: var(--lobe-select-available-height, var(--available-height));\n    padding-block: 0;\n  `,\n  listWithSearch: css`\n    padding-block-start: 4px;\n  `,\n  outlined: cx(\n    lobeStaticStylish.variantOutlined,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillTertiary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorBgContainer} 75%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n    `,\n  ),\n  popup: css`\n    --lobe-select-available-height: min(\n      var(--available-height),\n      var(--lobe-select-popup-max-height, var(--available-height))\n    );\n\n    transform-origin: var(--transform-origin);\n\n    display: flex;\n    flex-direction: column;\n\n    box-sizing: border-box;\n\n    transition:\n      opacity 150ms ${cssVar.motionEaseOut},\n      transform 150ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: scaleY(0.92);\n      opacity: 0;\n    }\n  `,\n  positioner: css`\n    z-index: 1100;\n    outline: none;\n  `,\n  prefix: css`\n    display: inline-flex;\n    align-items: center;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  scrollArrow: css`\n    cursor: default;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 16px;\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorBgElevated};\n  `,\n  search: css`\n    cursor: text;\n\n    display: flex;\n    align-items: center;\n\n    min-height: 36px;\n    margin-inline: -4px;\n    padding-block: 8px;\n    padding-inline: 12px;\n    border-block-end: 1px solid ${cssVar.colorFillSecondary};\n  `,\n  searchInput: css`\n    flex: 1;\n\n    min-width: 0;\n    padding-block: 0;\n    padding-inline: 4px;\n    border: 0;\n\n    font-size: 14px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    background: transparent;\n    outline: none;\n\n    &::placeholder {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  shadow: lobeStaticStylish.shadow,\n  suffix: css`\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  tag: css`\n    display: inline-flex;\n    align-items: center;\n\n    max-width: 100%;\n    padding-block: 0;\n    padding-inline: 6px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  tagClose: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-inline-start: 4px;\n\n    color: ${cssVar.colorTextSecondary};\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n  `,\n  tags: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n  `,\n  tagsValue: css`\n    /* No growing, so an empty trigger leaves the inline input the full width — but it must\n       still shrink, or the tags stay at max-content and run off the trigger instead of wrapping. */\n    flex: 0 1 auto;\n  `,\n  tagsSearch: css`\n    display: flex;\n    flex: 1;\n    min-width: 48px;\n  `,\n  trigger: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid transparent;\n    border-radius: ${cssVar.borderRadius};\n\n    font-family: inherit;\n    color: ${cssVar.colorText};\n\n    background: transparent;\n    outline: none;\n\n    transition: all 150ms ${cssVar.motionEaseOut};\n\n    &:not([data-disabled], [data-readonly])[data-popup-open],\n    &:not([data-disabled], [data-readonly])[data-open],\n    &:not([data-disabled], [data-readonly])[data-state='open'],\n    &:not([data-disabled], [data-readonly])[aria-expanded='true'] {\n      background: var(--lobe-select-open-bg, ${cssVar.colorFillTertiary});\n    }\n\n    ${focusRing};\n\n    &:hover [data-role='lobe-select-clear'] {\n      opacity: 1;\n    }\n\n    &[data-placeholder] [data-role='lobe-select-clear'] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n      background: var(--lobe-select-disabled-bg, transparent);\n\n      &:hover {\n        background: var(--lobe-select-disabled-bg, transparent);\n      }\n    }\n\n    &[data-readonly] {\n      cursor: default;\n      color: ${cssVar.colorTextSecondary};\n      background: var(--lobe-select-readonly-bg, transparent);\n\n      &:hover {\n        background: var(--lobe-select-readonly-bg, transparent);\n      }\n    }\n\n    &[data-disabled] [data-role='lobe-select-clear'] {\n      pointer-events: none;\n      opacity: 0;\n    }\n  `,\n  triggerLarge: css`\n    min-height: ${controlHeight.large}px;\n    padding-block: 6px;\n    padding-inline: 12px;\n\n    font-size: 16px;\n    line-height: 24px;\n  `,\n  triggerMiddle: css`\n    min-height: ${controlHeight.middle}px;\n    padding-block: 4px;\n    padding-inline: 11px;\n\n    font-size: 14px;\n    line-height: 20px;\n  `,\n  triggerSmall: css`\n    min-height: ${controlHeight.small}px;\n    padding-block: 0;\n    padding-inline: 8px;\n\n    font-size: 12px;\n    line-height: 18px;\n  `,\n  value: css`\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n\n    min-width: 0;\n\n    color: inherit;\n\n    &[data-placeholder] {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  valueText: css`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n\nexport const triggerVariants = cva(styles.trigger, {\n  defaultVariants: {\n    shadow: false,\n    size: 'middle',\n    variant: 'outlined',\n  },\n  variants: {\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    size: {\n      large: styles.triggerLarge,\n      middle: styles.triggerMiddle,\n      small: styles.triggerSmall,\n    },\n    variant: {\n      borderless: styles.borderless,\n      filled: styles.filled,\n      outlined: styles.outlined,\n    },\n  },\n});\n"],"mappings":";;;;;;AAOA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;CAUV,YAAY,GACVA,cAAkB,mBAClB,GAAG;+BACwB,OAAO,kBAAkB;sDACF,OAAO,kBAAkB;sDACzB,OAAO,kBAAkB;KAE7E;CACA,OAAO,GAAG;;;;aAIC,OAAO,kBAAkB;;;;gCAIN,OAAO,cAAc;;;eAGtC,OAAO,mBAAmB;;;CAGvC,OAAO,GAAG;CACV,QAAQ,GACNA,cAAkB,eAClB,GAAG;+BACwB,OAAO,mBAAmB;sDACH,OAAO,kBAAkB;sDACzB,OAAO,kBAAkB;KAE7E;CACA,OAAO,GAAG;CACV,YAAY,GAAG;CACf,MAAM,GAAG;;;kCAGuB,OAAO,cAAc;;;;;;CAMrD,MAAM,GAAG;CACT,kBAAkB,GAAG;;;;;CAKrB,eAAe,GAAG;;;;;;;;aAQP,OAAO,aAAa;;CAE/B,UAAU,GAAG;CACb,MAAM,GAAG;;;;;;;;CAQT,gBAAgB,GAAG;;;CAGnB,UAAU,GACRA,cAAkB,iBAClB,GAAG;+BACwB,OAAO,kBAAkB;sDACF,OAAO,iBAAiB;sDACxB,OAAO,iBAAiB;KAE5E;CACA,OAAO,GAAG;;;;;;;;;;;;;;sBAcU,OAAO,cAAc;wBACnB,OAAO,cAAc;;;;;;;;CAQ3C,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;;aAGA,OAAO,mBAAmB;;CAErC,aAAa,GAAG;;;;;;;;;aASL,OAAO,mBAAmB;;kBAErB,OAAO,gBAAgB;;CAEvC,QAAQ,GAAG;;;;;;;;;;kCAUqB,OAAO,mBAAmB;;CAE1D,aAAa,GAAG;;;;;;;;;;aAUL,OAAO,UAAU;;;;;;eAMf,OAAO,qBAAqB;;;CAGzC,QAAQA,cAAkB;CAC1B,QAAQ,GAAG;;;;aAIA,OAAO,mBAAmB;;CAErC,KAAK,GAAG;;;;;;;qBAOW,OAAO,eAAe;;;;aAI9B,OAAO,UAAU;;kBAEZ,OAAO,kBAAkB;;CAEzC,UAAU,GAAG;;;;;;;;;aASF,OAAO,mBAAmB;;gCAEP,OAAO,cAAc;;CAEnD,MAAM,GAAG;;;;;;CAMT,WAAW,GAAG;;;;;CAKd,YAAY,GAAG;;;;;CAKf,SAAS,GAAG;;;;;;;;;;;qBAWO,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;;;4BAKF,OAAO,cAAc;;;;;;+CAMF,OAAO,kBAAkB;;;MAGlE,UAAU;;;;;;;;;;;;;eAaD,OAAO,kBAAkB;;;;;;;;;;eAUzB,OAAO,mBAAmB;;;;;;;;;;;;;CAavC,cAAc,GAAG;kBACD,cAAc,MAAM;;;;;;;CAOpC,eAAe,GAAG;kBACF,cAAc,OAAO;;;;;;;CAOrC,cAAc,GAAG;kBACD,cAAc,MAAM;;;;;;;CAOpC,OAAO,GAAG;;;;;;;;;;;;eAYG,OAAO,qBAAqB;;;CAGzC,WAAW,GAAG;;;;;AAKhB,EAAE;AAEF,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}

package/es/base-ui/Slider/style.mjs

@@ -1,3 +1,4 @@
+import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 //#region src/base-ui/Slider/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
@@ -52,10 +53,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};
     }
 
-    &:focus-visible {
-      outline: 2px solid ${cssVar.colorPrimaryBorder};
-      outline-offset: 1px;
-    }
+    ${focusRing};
 
     [data-dragging] & {
       box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};

package/es/base-ui/Slider/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Slider/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  control: css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 20px;\n  `,\n  indicator: css`\n    border-radius: inherit;\n    background: ${cssVar.colorPrimary};\n\n    [data-disabled] & {\n      background: ${cssVar.colorTextQuaternary};\n    }\n  `,\n  root: css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  `,\n  thumb: css`\n    flex-shrink: 0;\n\n    width: 8px;\n    height: 16px;\n    border-radius: 100px;\n\n    background: ${cssVar.colorPrimary};\n    box-shadow: 0 0 0 1px ${cssVar.colorBgContainer};\n\n    transition: box-shadow 150ms ${cssVar.motionEaseOut};\n\n    &::before {\n      content: '';\n\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-start: 50%;\n      translate: -50% -50%;\n\n      width: 24px;\n      height: 40px;\n    }\n\n    &:hover:not([data-disabled] *) {\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    [data-dragging] & {\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n    }\n\n    [data-disabled] & {\n      background: ${cssVar.colorTextQuaternary};\n      box-shadow: 0 0 0 1px ${cssVar.colorBgContainer};\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  track: css`\n    width: 100%;\n    height: 4px;\n    border-radius: 100px;\n    background: ${cssVar.colorFillSecondary};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;;;CAMZ,WAAW,GAAG;;kBAEE,OAAO,aAAa;;;oBAGlB,OAAO,oBAAoB;;;CAG7C,MAAM,GAAG;;;;;;;;;CAST,OAAO,GAAG;;;;;;;kBAOM,OAAO,aAAa;4BACV,OAAO,iBAAiB;;mCAEjB,OAAO,cAAc;;;;;;;;;;;;;;;8BAe1B,OAAO,mBAAmB;;;;2BAI7B,OAAO,mBAAmB;;;;;8BAKvB,OAAO,mBAAmB;;;;oBAIpC,OAAO,oBAAoB;8BACjB,OAAO,iBAAiB;;;;;;;CAOpD,OAAO,GAAG;;;;kBAIM,OAAO,mBAAmB;;AAE5C,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Slider/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  control: css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 20px;\n  `,\n  indicator: css`\n    border-radius: inherit;\n    background: ${cssVar.colorPrimary};\n\n    [data-disabled] & {\n      background: ${cssVar.colorTextQuaternary};\n    }\n  `,\n  root: css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  `,\n  thumb: css`\n    flex-shrink: 0;\n\n    width: 8px;\n    height: 16px;\n    border-radius: 100px;\n\n    background: ${cssVar.colorPrimary};\n    box-shadow: 0 0 0 1px ${cssVar.colorBgContainer};\n\n    transition: box-shadow 150ms ${cssVar.motionEaseOut};\n\n    &::before {\n      content: '';\n\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-start: 50%;\n      translate: -50% -50%;\n\n      width: 24px;\n      height: 40px;\n    }\n\n    &:hover:not([data-disabled] *) {\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n    }\n\n    ${focusRing};\n\n    [data-dragging] & {\n      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n    }\n\n    [data-disabled] & {\n      background: ${cssVar.colorTextQuaternary};\n      box-shadow: 0 0 0 1px ${cssVar.colorBgContainer};\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  track: css`\n    width: 100%;\n    height: 4px;\n    border-radius: 100px;\n    background: ${cssVar.colorFillSecondary};\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;;;CAMZ,WAAW,GAAG;;kBAEE,OAAO,aAAa;;;oBAGlB,OAAO,oBAAoB;;;CAG7C,MAAM,GAAG;;;;;;;;;CAST,OAAO,GAAG;;;;;;;kBAOM,OAAO,aAAa;4BACV,OAAO,iBAAiB;;mCAEjB,OAAO,cAAc;;;;;;;;;;;;;;;8BAe1B,OAAO,mBAAmB;;;MAGlD,UAAU;;;8BAGc,OAAO,mBAAmB;;;;oBAIpC,OAAO,oBAAoB;8BACjB,OAAO,iBAAiB;;;;;;;CAOpD,OAAO,GAAG;;;;kBAIM,OAAO,mBAAmB;;AAE5C,EAAE"}

package/es/base-ui/Switch/style.mjs

@@ -1,3 +1,4 @@
+import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/Switch/style.ts
@@ -115,10 +116,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       --switch-dir: -1;
     }
 
-    &:focus-visible {
-      outline: 2px solid ${cssVar.colorPrimaryBorder};
-      outline-offset: 1px;
-    }
+    ${focusRing};
 
     &:hover:not([data-disabled]) {
       background: ${cssVar.colorFill};

package/es/base-ui/Switch/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Switch/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  icon: css`\n    pointer-events: none;\n\n    position: absolute;\n    inset-block: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    color: ${cssVar.colorBgLayout};\n\n    transition:\n      opacity 200ms ${cssVar.motionEaseOut},\n      scale 200ms ${cssVar.motionEaseOut};\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  iconLeft: css`\n    inset-inline-start: 4px;\n    scale: 0;\n    opacity: 0;\n\n    [data-checked] & {\n      scale: 1;\n      opacity: 1;\n    }\n  `,\n  iconLeftSmall: css`\n    inset-inline-start: 4px;\n    scale: 0;\n    opacity: 0;\n\n    [data-checked] & {\n      scale: 1;\n      opacity: 1;\n    }\n  `,\n  iconRight: css`\n    inset-inline-end: 4px;\n\n    [data-checked] & {\n      scale: 0;\n      opacity: 0;\n    }\n  `,\n  iconRightSmall: css`\n    inset-inline-end: 4px;\n\n    [data-checked] & {\n      scale: 0;\n      opacity: 0;\n    }\n  `,\n  iconThumb: css`\n    position: relative;\n    inset: unset;\n    transform: none;\n    color: ${cssVar.colorPrimary};\n  `,\n  loading: css`\n    @keyframes lobe-switch-loading {\n      0% {\n        transform: rotate(0deg);\n      }\n\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    animation: lobe-switch-loading 1s linear infinite;\n\n    @media (prefers-reduced-motion: reduce) {\n      animation-duration: 0s;\n    }\n  `,\n  root: css`\n    --switch-dir: 1;\n\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n\n    overflow: hidden;\n    display: inline-flex;\n    align-items: center;\n    justify-content: flex-start;\n\n    box-sizing: border-box;\n    padding: 2px;\n    border: 0;\n    border-radius: 100px;\n\n    background: ${cssVar.colorFillSecondary};\n    outline: none;\n    box-shadow: inset 0 1.5px 2px rgb(0 0 0 / 8%);\n\n    transition:\n      background 200ms ${cssVar.motionEaseOut},\n      box-shadow 200ms ${cssVar.motionEaseOut};\n\n    &:dir(rtl) {\n      --switch-dir: -1;\n    }\n\n    [dir='rtl'] & {\n      --switch-dir: -1;\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &:hover:not([data-disabled]) {\n      background: ${cssVar.colorFill};\n    }\n\n    &[data-checked] {\n      background: ${cssVar.colorPrimary};\n      box-shadow: inset 0 1.5px 3px rgb(0 0 0 / 18%);\n\n      &:hover:not([data-disabled]) {\n        background: ${cssVar.colorPrimaryHover};\n      }\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.45;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  rootDefault: css`\n    width: 36px;\n    min-width: 36px;\n    height: 22px;\n  `,\n  rootSmall: css`\n    width: 28px;\n    min-width: 28px;\n    height: 16px;\n  `,\n  thumb: css`\n    transform: translateX(calc(var(--switch-x, 0px) * var(--switch-dir, 1)));\n\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow:\n      0 0 0 0.5px rgb(0 0 0 / 4%),\n      0 1px 1px rgb(0 0 0 / 6%),\n      0 3px 8px rgb(0 30 80 / 16%);\n\n    transition: box-shadow 200ms ${cssVar.motionEaseOut};\n\n    [role='switch']:hover:not([data-disabled]) > & {\n      box-shadow:\n        0 0 0 0.5px rgb(0 0 0 / 4%),\n        0 1px 1px rgb(0 0 0 / 8%),\n        0 6px 14px rgb(0 30 80 / 24%);\n    }\n\n    [data-disabled] > & {\n      box-shadow: none;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  thumbDefault: css`\n    width: 18px;\n    height: 18px;\n  `,\n  thumbSmall: css`\n    width: 12px;\n    height: 12px;\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    size: 'default',\n  },\n  variants: {\n    size: {\n      default: styles.rootDefault,\n      small: styles.rootSmall,\n    },\n  },\n});\n\nexport const thumbVariants = cva(styles.thumb, {\n  defaultVariants: {\n    size: 'default',\n  },\n  variants: {\n    size: {\n      default: styles.thumbDefault,\n      small: styles.thumbSmall,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;aAUE,OAAO,cAAc;;;sBAGZ,OAAO,cAAc;oBACvB,OAAO,cAAc;;;;;;CAMvC,UAAU,GAAG;;;;;;;;;;CAUb,eAAe,GAAG;;;;;;;;;;CAUlB,WAAW,GAAG;;;;;;;;CAQd,gBAAgB,GAAG;;;;;;;;CAQnB,WAAW,GAAG;;;;aAIH,OAAO,aAAa;;CAE/B,SAAS,GAAG;;;;;;;;;;;;;;;;;CAiBZ,MAAM,GAAG;;;;;;;;;;;;;;;;;;kBAkBO,OAAO,mBAAmB;;;;;yBAKnB,OAAO,cAAc;yBACrB,OAAO,cAAc;;;;;;;;;;;2BAWnB,OAAO,mBAAmB;;;;;oBAKjC,OAAO,UAAU;;;;oBAIjB,OAAO,aAAa;;;;sBAIlB,OAAO,kBAAkB;;;;;;;;;;;;;CAa7C,aAAa,GAAG;;;;;CAKhB,WAAW,GAAG;;;;;CAKd,OAAO,GAAG;;;;;;;;;;kBAUM,OAAO,iBAAiB;;;;;;mCAMP,OAAO,cAAc;;;;;;;;;;;;;;;;;CAiBtD,cAAc,GAAG;;;;CAIjB,YAAY,GAAG;;;;AAIjB,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,MAAM,UACR;CACA,UAAU,EACR,MAAM;EACJ,SAAS,OAAO;EAChB,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,gBAAgB,IAAI,OAAO,OAAO;CAC7C,iBAAiB,EACf,MAAM,UACR;CACA,UAAU,EACR,MAAM;EACJ,SAAS,OAAO;EAChB,OAAO,OAAO;CAChB,EACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Switch/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  icon: css`\n    pointer-events: none;\n\n    position: absolute;\n    inset-block: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    color: ${cssVar.colorBgLayout};\n\n    transition:\n      opacity 200ms ${cssVar.motionEaseOut},\n      scale 200ms ${cssVar.motionEaseOut};\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  iconLeft: css`\n    inset-inline-start: 4px;\n    scale: 0;\n    opacity: 0;\n\n    [data-checked] & {\n      scale: 1;\n      opacity: 1;\n    }\n  `,\n  iconLeftSmall: css`\n    inset-inline-start: 4px;\n    scale: 0;\n    opacity: 0;\n\n    [data-checked] & {\n      scale: 1;\n      opacity: 1;\n    }\n  `,\n  iconRight: css`\n    inset-inline-end: 4px;\n\n    [data-checked] & {\n      scale: 0;\n      opacity: 0;\n    }\n  `,\n  iconRightSmall: css`\n    inset-inline-end: 4px;\n\n    [data-checked] & {\n      scale: 0;\n      opacity: 0;\n    }\n  `,\n  iconThumb: css`\n    position: relative;\n    inset: unset;\n    transform: none;\n    color: ${cssVar.colorPrimary};\n  `,\n  loading: css`\n    @keyframes lobe-switch-loading {\n      0% {\n        transform: rotate(0deg);\n      }\n\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    animation: lobe-switch-loading 1s linear infinite;\n\n    @media (prefers-reduced-motion: reduce) {\n      animation-duration: 0s;\n    }\n  `,\n  root: css`\n    --switch-dir: 1;\n\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n\n    overflow: hidden;\n    display: inline-flex;\n    align-items: center;\n    justify-content: flex-start;\n\n    box-sizing: border-box;\n    padding: 2px;\n    border: 0;\n    border-radius: 100px;\n\n    background: ${cssVar.colorFillSecondary};\n    outline: none;\n    box-shadow: inset 0 1.5px 2px rgb(0 0 0 / 8%);\n\n    transition:\n      background 200ms ${cssVar.motionEaseOut},\n      box-shadow 200ms ${cssVar.motionEaseOut};\n\n    &:dir(rtl) {\n      --switch-dir: -1;\n    }\n\n    [dir='rtl'] & {\n      --switch-dir: -1;\n    }\n\n    ${focusRing};\n\n    &:hover:not([data-disabled]) {\n      background: ${cssVar.colorFill};\n    }\n\n    &[data-checked] {\n      background: ${cssVar.colorPrimary};\n      box-shadow: inset 0 1.5px 3px rgb(0 0 0 / 18%);\n\n      &:hover:not([data-disabled]) {\n        background: ${cssVar.colorPrimaryHover};\n      }\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.45;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  rootDefault: css`\n    width: 36px;\n    min-width: 36px;\n    height: 22px;\n  `,\n  rootSmall: css`\n    width: 28px;\n    min-width: 28px;\n    height: 16px;\n  `,\n  thumb: css`\n    transform: translateX(calc(var(--switch-x, 0px) * var(--switch-dir, 1)));\n\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow:\n      0 0 0 0.5px rgb(0 0 0 / 4%),\n      0 1px 1px rgb(0 0 0 / 6%),\n      0 3px 8px rgb(0 30 80 / 16%);\n\n    transition: box-shadow 200ms ${cssVar.motionEaseOut};\n\n    [role='switch']:hover:not([data-disabled]) > & {\n      box-shadow:\n        0 0 0 0.5px rgb(0 0 0 / 4%),\n        0 1px 1px rgb(0 0 0 / 8%),\n        0 6px 14px rgb(0 30 80 / 24%);\n    }\n\n    [data-disabled] > & {\n      box-shadow: none;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  thumbDefault: css`\n    width: 18px;\n    height: 18px;\n  `,\n  thumbSmall: css`\n    width: 12px;\n    height: 12px;\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    size: 'default',\n  },\n  variants: {\n    size: {\n      default: styles.rootDefault,\n      small: styles.rootSmall,\n    },\n  },\n});\n\nexport const thumbVariants = cva(styles.thumb, {\n  defaultVariants: {\n    size: 'default',\n  },\n  variants: {\n    size: {\n      default: styles.thumbDefault,\n      small: styles.thumbSmall,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;aAUE,OAAO,cAAc;;;sBAGZ,OAAO,cAAc;oBACvB,OAAO,cAAc;;;;;;CAMvC,UAAU,GAAG;;;;;;;;;;CAUb,eAAe,GAAG;;;;;;;;;;CAUlB,WAAW,GAAG;;;;;;;;CAQd,gBAAgB,GAAG;;;;;;;;CAQnB,WAAW,GAAG;;;;aAIH,OAAO,aAAa;;CAE/B,SAAS,GAAG;;;;;;;;;;;;;;;;;CAiBZ,MAAM,GAAG;;;;;;;;;;;;;;;;;;kBAkBO,OAAO,mBAAmB;;;;;yBAKnB,OAAO,cAAc;yBACrB,OAAO,cAAc;;;;;;;;;;MAUxC,UAAU;;;oBAGI,OAAO,UAAU;;;;oBAIjB,OAAO,aAAa;;;;sBAIlB,OAAO,kBAAkB;;;;;;;;;;;;;CAa7C,aAAa,GAAG;;;;;CAKhB,WAAW,GAAG;;;;;CAKd,OAAO,GAAG;;;;;;;;;;kBAUM,OAAO,iBAAiB;;;;;;mCAMP,OAAO,cAAc;;;;;;;;;;;;;;;;;CAiBtD,cAAc,GAAG;;;;CAIjB,YAAY,GAAG;;;;AAIjB,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,MAAM,UACR;CACA,UAAU,EACR,MAAM;EACJ,SAAS,OAAO;EAChB,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,gBAAgB,IAAI,OAAO,OAAO;CAC7C,iBAAiB,EACf,MAAM,UACR;CACA,UAAU,EACR,MAAM;EACJ,SAAS,OAAO;EAChB,OAAO,OAAO;CAChB,EACF;AACF,CAAC"}

package/es/base-ui/Tabs/style.mjs

@@ -1,3 +1,4 @@
+import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/Tabs/style.ts
@@ -95,12 +96,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 	panel: css`
     padding-block-start: 12px;
     outline: none;
-
-    &:focus-visible {
-      border-radius: ${cssVar.borderRadius};
-      outline: 2px solid ${cssVar.colorPrimaryBorder};
-      outline-offset: 2px;
-    }
+    border-radius: ${cssVar.borderRadius};
+    ${focusRing};
   `,
 	root: css`
     display: flex;
@@ -146,10 +143,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       transform: scale(0.98);
     }
 
-    &:focus-visible {
-      outline: 2px solid ${cssVar.colorPrimaryBorder};
-      outline-offset: -2px;
-    }
+    ${focusRing};
 
     &[data-active] {
       color: ${cssVar.colorPrimary};

package/es/base-ui/Tabs/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tabs/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n\n    transition-timing-function: ${cssVar.motionEaseOut};\n    transition-duration: 240ms;\n    transition-property: inset-inline-start, inset-block-start, width, height, transform;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  indicatorPoint: css`\n    inset-block-end: 6px;\n    inset-inline-start: calc(var(--active-tab-left) + var(--active-tab-width) / 2 - 2.5px);\n\n    width: 5px;\n    height: 5px;\n    border-radius: 50%;\n\n    background: ${cssVar.colorPrimary};\n\n    [data-orientation='horizontal'] &:dir(rtl) {\n      inset-inline-start: calc(var(--active-tab-right) + var(--active-tab-width) / 2 - 2.5px);\n    }\n  `,\n  indicatorRounded: css`\n    inset-block-start: var(--active-tab-top);\n    inset-inline-start: var(--active-tab-left);\n\n    width: var(--active-tab-width);\n    height: var(--active-tab-height);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    [data-orientation='horizontal'] &:dir(rtl) {\n      inset-inline-start: var(--active-tab-right);\n    }\n  `,\n  indicatorSquare: css`\n    inset-block-end: 0;\n    inset-inline-start: var(--active-tab-left);\n\n    width: var(--active-tab-width);\n    height: 2px;\n\n    background: ${cssVar.colorPrimary};\n\n    [data-orientation='horizontal'] &:dir(rtl) {\n      inset-inline-start: var(--active-tab-right);\n    }\n  `,\n  list: css`\n    position: relative;\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    gap: 2px;\n    align-items: center;\n\n    &[data-orientation='vertical'] {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  `,\n  listRounded: css`\n    gap: 4px;\n    align-self: flex-start;\n\n    padding: 3px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    background: ${cssVar.colorBgLayout};\n\n    &[data-orientation='vertical'] {\n      align-self: stretch;\n    }\n  `,\n  listSquare: css`\n    gap: 16px;\n    box-shadow: inset 0 -1px 0 ${cssVar.colorBorderSecondary};\n\n    &[data-orientation='vertical'] {\n      box-shadow: inset -1px 0 0 ${cssVar.colorBorderSecondary};\n    }\n  `,\n  panel: css`\n    padding-block-start: 12px;\n    outline: none;\n\n    &:focus-visible {\n      border-radius: ${cssVar.borderRadius};\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 2px;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n\n    &[data-orientation='vertical'] {\n      flex-direction: row;\n    }\n  `,\n  tab: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n    z-index: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 0;\n\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n\n    background: transparent;\n    outline: none;\n\n    transition:\n      color 120ms ${cssVar.motionEaseOut},\n      transform 120ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled]) {\n      color: ${cssVar.colorText};\n    }\n\n    &:active:not([data-disabled]) {\n      transform: scale(0.98);\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n\n    &[data-active] {\n      color: ${cssVar.colorPrimary};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  tabLarge: css`\n    height: 36px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n  tabMiddle: css`\n    height: 32px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 13px;\n  `,\n  tabPoint: css`\n    height: auto;\n    padding-block: 8px 14px;\n  `,\n  tabSmall: css`\n    height: 26px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 12px;\n  `,\n  tabSquare: css`\n    height: auto;\n    padding-block: 8px;\n    border-radius: 0;\n  `,\n}));\n\nexport const tabVariants = cva(styles.tab, {\n  defaultVariants: {\n    size: 'middle',\n    variant: 'rounded',\n  },\n  variants: {\n    size: {\n      large: styles.tabLarge,\n      middle: styles.tabMiddle,\n      small: styles.tabSmall,\n    },\n    variant: {\n      point: styles.tabPoint,\n      rounded: null,\n      square: styles.tabSquare,\n    },\n  },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n  defaultVariants: {\n    variant: 'rounded',\n  },\n  variants: {\n    variant: {\n      point: styles.indicatorPoint,\n      rounded: styles.indicatorRounded,\n      square: styles.indicatorSquare,\n    },\n  },\n});\n\nexport const listVariants = cva(styles.list, {\n  defaultVariants: {\n    variant: 'rounded',\n  },\n  variants: {\n    variant: {\n      point: null,\n      rounded: styles.listRounded,\n      square: styles.listSquare,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;kCAMkB,OAAO,cAAc;;;;;;;;CAQrD,gBAAgB,GAAG;;;;;;;;kBAQH,OAAO,aAAa;;;;;;CAMpC,kBAAkB,GAAG;;;;;;qBAMF,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;;;;;CAMzC,iBAAiB,GAAG;;;;;;;kBAOJ,OAAO,aAAa;;;;;;CAMpC,MAAM,GAAG;;;;;;;;;;;;;CAaT,aAAa,GAAG;;;;;qBAKG,OAAO,eAAe;;kBAEzB,OAAO,cAAc;;;;;;CAMrC,YAAY,GAAG;;iCAEgB,OAAO,qBAAqB;;;mCAG1B,OAAO,qBAAqB;;;CAG7D,OAAO,GAAG;;;;;uBAKW,OAAO,aAAa;2BAChB,OAAO,mBAAmB;;;;CAInD,MAAM,GAAG;;;;;;;;;CAST,KAAK,GAAG;;;;;;;;;;;;;;;;;aAiBG,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;;2BAQL,OAAO,mBAAmB;;;;;eAKtC,OAAO,aAAa;;;;;eAKpB,OAAO,kBAAkB;;;;;;;CAOtC,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,UAAU,GAAG;;;;CAIb,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;;;AAKhB,EAAE;AAEF,MAAa,cAAc,IAAI,OAAO,KAAK;CACzC,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,OAAO,OAAO;GACd,SAAS;GACT,QAAQ,OAAO;EACjB;CACF;AACF,CAAC;AAED,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,QAAQ,OAAO;CACjB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS,OAAO;EAChB,QAAQ,OAAO;CACjB,EACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tabs/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  indicator: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 0;\n\n    transition-timing-function: ${cssVar.motionEaseOut};\n    transition-duration: 240ms;\n    transition-property: inset-inline-start, inset-block-start, width, height, transform;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  indicatorPoint: css`\n    inset-block-end: 6px;\n    inset-inline-start: calc(var(--active-tab-left) + var(--active-tab-width) / 2 - 2.5px);\n\n    width: 5px;\n    height: 5px;\n    border-radius: 50%;\n\n    background: ${cssVar.colorPrimary};\n\n    [data-orientation='horizontal'] &:dir(rtl) {\n      inset-inline-start: calc(var(--active-tab-right) + var(--active-tab-width) / 2 - 2.5px);\n    }\n  `,\n  indicatorRounded: css`\n    inset-block-start: var(--active-tab-top);\n    inset-inline-start: var(--active-tab-left);\n\n    width: var(--active-tab-width);\n    height: var(--active-tab-height);\n    border-radius: ${cssVar.borderRadius};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadowTertiary};\n\n    [data-orientation='horizontal'] &:dir(rtl) {\n      inset-inline-start: var(--active-tab-right);\n    }\n  `,\n  indicatorSquare: css`\n    inset-block-end: 0;\n    inset-inline-start: var(--active-tab-left);\n\n    width: var(--active-tab-width);\n    height: 2px;\n\n    background: ${cssVar.colorPrimary};\n\n    [data-orientation='horizontal'] &:dir(rtl) {\n      inset-inline-start: var(--active-tab-right);\n    }\n  `,\n  list: css`\n    position: relative;\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    gap: 2px;\n    align-items: center;\n\n    &[data-orientation='vertical'] {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  `,\n  listRounded: css`\n    gap: 4px;\n    align-self: flex-start;\n\n    padding: 3px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    background: ${cssVar.colorBgLayout};\n\n    &[data-orientation='vertical'] {\n      align-self: stretch;\n    }\n  `,\n  listSquare: css`\n    gap: 16px;\n    box-shadow: inset 0 -1px 0 ${cssVar.colorBorderSecondary};\n\n    &[data-orientation='vertical'] {\n      box-shadow: inset -1px 0 0 ${cssVar.colorBorderSecondary};\n    }\n  `,\n  panel: css`\n    padding-block-start: 12px;\n    outline: none;\n    border-radius: ${cssVar.borderRadius};\n    ${focusRing};\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n\n    &[data-orientation='vertical'] {\n      flex-direction: row;\n    }\n  `,\n  tab: css`\n    cursor: pointer;\n    user-select: none;\n\n    position: relative;\n    z-index: 1;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n    border: 0;\n\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n\n    background: transparent;\n    outline: none;\n\n    transition:\n      color 120ms ${cssVar.motionEaseOut},\n      transform 120ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled]) {\n      color: ${cssVar.colorText};\n    }\n\n    &:active:not([data-disabled]) {\n      transform: scale(0.98);\n    }\n\n    ${focusRing};\n\n    &[data-active] {\n      color: ${cssVar.colorPrimary};\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  tabLarge: css`\n    height: 36px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 14px;\n  `,\n  tabMiddle: css`\n    height: 32px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 13px;\n  `,\n  tabPoint: css`\n    height: auto;\n    padding-block: 8px 14px;\n  `,\n  tabSmall: css`\n    height: 26px;\n    padding-inline: 10px;\n    border-radius: ${cssVar.borderRadius};\n    font-size: 12px;\n  `,\n  tabSquare: css`\n    height: auto;\n    padding-block: 8px;\n    border-radius: 0;\n  `,\n}));\n\nexport const tabVariants = cva(styles.tab, {\n  defaultVariants: {\n    size: 'middle',\n    variant: 'rounded',\n  },\n  variants: {\n    size: {\n      large: styles.tabLarge,\n      middle: styles.tabMiddle,\n      small: styles.tabSmall,\n    },\n    variant: {\n      point: styles.tabPoint,\n      rounded: null,\n      square: styles.tabSquare,\n    },\n  },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n  defaultVariants: {\n    variant: 'rounded',\n  },\n  variants: {\n    variant: {\n      point: styles.indicatorPoint,\n      rounded: styles.indicatorRounded,\n      square: styles.indicatorSquare,\n    },\n  },\n});\n\nexport const listVariants = cva(styles.list, {\n  defaultVariants: {\n    variant: 'rounded',\n  },\n  variants: {\n    variant: {\n      point: null,\n      rounded: styles.listRounded,\n      square: styles.listSquare,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,WAAW,GAAG;;;;;;kCAMkB,OAAO,cAAc;;;;;;;;CAQrD,gBAAgB,GAAG;;;;;;;;kBAQH,OAAO,aAAa;;;;;;CAMpC,kBAAkB,GAAG;;;;;;qBAMF,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;;;;;CAMzC,iBAAiB,GAAG;;;;;;;kBAOJ,OAAO,aAAa;;;;;;CAMpC,MAAM,GAAG;;;;;;;;;;;;;CAaT,aAAa,GAAG;;;;;qBAKG,OAAO,eAAe;;kBAEzB,OAAO,cAAc;;;;;;CAMrC,YAAY,GAAG;;iCAEgB,OAAO,qBAAqB;;;mCAG1B,OAAO,qBAAqB;;;CAG7D,OAAO,GAAG;;;qBAGS,OAAO,aAAa;MACnC,UAAU;;CAEd,MAAM,GAAG;;;;;;;;;CAST,KAAK,GAAG;;;;;;;;;;;;;;;;;aAiBG,OAAO,mBAAmB;;;;;;;oBAOnB,OAAO,cAAc;wBACjB,OAAO,cAAc;;;eAG9B,OAAO,UAAU;;;;;;;MAO1B,UAAU;;;eAGD,OAAO,aAAa;;;;;eAKpB,OAAO,kBAAkB;;;;;;;CAOtC,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;qBAGK,OAAO,aAAa;;;CAGvC,UAAU,GAAG;;;;CAIb,UAAU,GAAG;;;qBAGM,OAAO,aAAa;;;CAGvC,WAAW,GAAG;;;;;AAKhB,EAAE;AAEF,MAAa,cAAc,IAAI,OAAO,KAAK;CACzC,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,OAAO,OAAO;GACd,SAAS;GACT,QAAQ,OAAO;EACjB;CACF;AACF,CAAC;AAED,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,QAAQ,OAAO;CACjB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS,OAAO;EAChB,QAAQ,OAAO;CACjB,EACF;AACF,CAAC"}

package/es/base-ui/Toast/style.mjs

@@ -1,3 +1,4 @@
+import { focusRing, focusRingColor } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/Toast/style.ts
@@ -23,10 +24,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       background 0.2s,
       color 0.2s;
 
-    &:focus-visible {
-      outline: 2px solid ${cssVar.colorPrimaryBorder};
-      outline-offset: 1px;
-    }
+    ${focusRing};
   `,
 	actionDanger: css`
     color: ${cssVar.colorBgLayout};
@@ -40,9 +38,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       background: ${cssVar.colorErrorActive};
     }
 
-    &:focus-visible {
-      outline-color: ${cssVar.colorErrorBorder};
-    }
+    ${focusRingColor(cssVar.colorError)};
   `,
 	actionGhost: css`
     border: 1px solid ${cssVar.colorBorder};

package/es/base-ui/Toast/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Toast/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    height: 28px;\n    padding-inline: 12px;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n\n    transition:\n      background 0.2s,\n      color 0.2s;\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  actionDanger: css`\n    color: ${cssVar.colorBgLayout};\n    background: ${cssVar.colorError};\n\n    &:hover {\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorErrorActive};\n    }\n\n    &:focus-visible {\n      outline-color: ${cssVar.colorErrorBorder};\n    }\n  `,\n\n  actionGhost: css`\n    border: 1px solid ${cssVar.colorBorder};\n    color: ${cssVar.colorText};\n    background: transparent;\n\n    &:hover {\n      border-color: ${cssVar.colorPrimary};\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:active {\n      border-color: ${cssVar.colorPrimaryActive};\n      color: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionPrimary: css`\n    color: ${cssVar.colorBgLayout};\n    background: ${cssVar.colorPrimary};\n\n    &:hover {\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionSecondary: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorFillSecondary};\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  actionText: css`\n    color: ${cssVar.colorPrimary};\n    background: transparent;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  actions: css`\n    display: flex;\n    flex-grow: 1;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    align-self: flex-end;\n    justify-content: flex-end;\n\n    margin-block-start: 8px;\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 20px;\n    margin-inline-start: auto;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    transition: all 0.2s;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  content: css`\n    overflow: hidden;\n    transition: opacity 0.2s;\n\n    &[data-behind] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-expanded] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n  `,\n\n  contentArea: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  `,\n\n  description: css`\n    margin: 0;\n    font-size: 13px;\n    line-height: 1.5;\n    color: ${cssVar.colorTextSecondary};\n  `,\n\n  descriptionStandalone: css`\n    color: ${cssVar.colorText};\n  `,\n\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  root: css`\n    --toast-gap: 12px;\n    --toast-peek: 12px;\n    --toast-scale: calc(1 - var(--toast-index) * 0.05);\n    --toast-shrink: calc(1 - var(--toast-scale));\n    --toast-collapsed-height: var(--toast-frontmost-height, var(--toast-height));\n\n    cursor: default;\n    user-select: none;\n\n    position: absolute;\n    z-index: calc(1000 - var(--toast-index));\n    inset-inline: 0;\n\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--toast-collapsed-height);\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-radius: var(--toast-border-radius, ${cssVar.borderRadiusLG});\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    background-clip: padding-box;\n    box-shadow:\n      0 0 0 1px ${cssVar.colorBorderSecondary},\n      0 4px 12px rgb(0 0 0 / 10%),\n      0 16px 32px -8px rgb(0 0 0 / 12%);\n\n    transition:\n      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 0.4s,\n      height 0.15s;\n\n    /* Fill gap between stacked toasts to prevent hover flicker */\n    &::after {\n      content: '';\n      position: absolute;\n      inset-inline: 0;\n      height: calc(var(--toast-gap) + var(--toast-peek) + 8px);\n    }\n\n    &[data-limited] {\n      opacity: 0;\n    }\n\n    &[data-swiping] {\n      transition: none;\n    }\n  `,\n\n  // Bottom positions - stack upward\n  rootBottom: css`\n    inset-block: auto 0;\n    transform-origin: bottom center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) -\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-start: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) *\n              var(--toast-gap) * -1\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(150%);\n      opacity: 0;\n    }\n  `,\n\n  // Top positions - stack downward\n  rootTop: css`\n    inset-block: 0 auto;\n    transform-origin: top center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) +\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-end: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) *\n              var(--toast-gap)\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(-150%);\n      opacity: 0;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n  `,\n\n  titleRow: css`\n    display: flex;\n    gap: 8px;\n    align-items: flex-start;\n  `,\n\n  toastBody: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  toastBodyCenter: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 100000;\n\n    width: 360px;\n    max-width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);\n\n    outline: 0;\n\n    @media (width <= 480px) {\n      width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);\n    }\n  `,\n\n  viewportBottom: css`\n    inset-block-end: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportBottomLeft: css`\n    inset-block-end: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: var(--toast-viewport-offset-x, 16px);\n  `,\n\n  viewportBottomRight: css`\n    inset-block-end: var(--toast-viewport-offset-y, 16px);\n    inset-inline-end: var(--toast-viewport-offset-x, 16px);\n  `,\n\n  viewportTop: css`\n    inset-block-start: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportTopLeft: css`\n    inset-block-start: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: var(--toast-viewport-offset-x, 16px);\n  `,\n\n  viewportTopRight: css`\n    inset-block-start: var(--toast-viewport-offset-y, 16px);\n    inset-inline-end: var(--toast-viewport-offset-x, 16px);\n  `,\n}));\n\nexport const viewportVariants = cva(styles.viewport, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.viewportBottom,\n      'bottom-left': styles.viewportBottomLeft,\n      'bottom-right': styles.viewportBottomRight,\n      'top': styles.viewportTop,\n      'top-left': styles.viewportTopLeft,\n      'top-right': styles.viewportTopRight,\n    },\n  },\n});\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.rootBottom,\n      'bottom-left': styles.rootBottom,\n      'bottom-right': styles.rootBottom,\n      'top': styles.rootTop,\n      'top-left': styles.rootTop,\n      'top-right': styles.rootTop,\n    },\n  },\n});\n\nexport const actionVariants = cva(styles.action, {\n  defaultVariants: {\n    variant: 'primary',\n  },\n  variants: {\n    variant: {\n      danger: styles.actionDanger,\n      ghost: styles.actionGhost,\n      primary: styles.actionPrimary,\n      secondary: styles.actionSecondary,\n      text: styles.actionText,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,eAAe;;;;;;;;;;;2BAWhB,OAAO,mBAAmB;;;;CAKnD,cAAc,GAAG;aACN,OAAO,cAAc;kBAChB,OAAO,WAAW;;;oBAGhB,OAAO,gBAAgB;;;;oBAIvB,OAAO,iBAAiB;;;;uBAIrB,OAAO,iBAAiB;;;CAI7C,aAAa,GAAG;wBACM,OAAO,YAAY;aAC9B,OAAO,UAAU;;;;sBAIR,OAAO,aAAa;eAC3B,OAAO,aAAa;;;;sBAIb,OAAO,mBAAmB;eACjC,OAAO,mBAAmB;;;CAIvC,eAAe,GAAG;aACP,OAAO,cAAc;kBAChB,OAAO,aAAa;;;oBAGlB,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,iBAAiB,GAAG;aACT,OAAO,UAAU;kBACZ,OAAO,mBAAmB;;;oBAGxB,OAAO,kBAAkB;;;;oBAIzB,OAAO,UAAU;;;CAInC,YAAY,GAAG;aACJ,OAAO,aAAa;;;;oBAIb,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;CAYZ,OAAO,GAAG;;;;;;;;;;;;;qBAaS,OAAO,eAAe;;aAE9B,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;;;;CAeZ,aAAa,GAAG;;;;;;CAOhB,aAAa,GAAG;;;;aAIL,OAAO,mBAAmB;;CAGrC,uBAAuB,GAAG;aACf,OAAO,UAAU;;CAG5B,MAAM,GAAG;;;;;;CAOT,MAAM,GAAG;;;;;;;;;;;;;;;;;;;gDAmBqC,OAAO,eAAe;;aAEzD,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;kBAGvB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;CA2B5C,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCf,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCZ,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,UAAU,GAAG;;;;;CAMb,WAAW,GAAG;;;;;CAMd,iBAAiB,GAAG;;;;;CAMpB,UAAU,GAAG;;;;;;;;;;;;;CAcb,gBAAgB,GAAG;;;;;CAMnB,oBAAoB,GAAG;;;;CAKvB,qBAAqB,GAAG;;;;CAKxB,aAAa,GAAG;;;;;CAMhB,iBAAiB,GAAG;;;;CAKpB,kBAAkB,GAAG;;;;AAIvB,EAAE;AAEF,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,UAAU,eACZ;CACA,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;CACtB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,UAAU,eACZ;CACA,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;CACtB,EACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,WAAW,OAAO;EAClB,MAAM,OAAO;CACf,EACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Toast/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing, focusRingColor } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    height: 28px;\n    padding-inline: 12px;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n\n    transition:\n      background 0.2s,\n      color 0.2s;\n\n    ${focusRing};\n  `,\n\n  actionDanger: css`\n    color: ${cssVar.colorBgLayout};\n    background: ${cssVar.colorError};\n\n    &:hover {\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorErrorActive};\n    }\n\n    ${focusRingColor(cssVar.colorError)};\n  `,\n\n  actionGhost: css`\n    border: 1px solid ${cssVar.colorBorder};\n    color: ${cssVar.colorText};\n    background: transparent;\n\n    &:hover {\n      border-color: ${cssVar.colorPrimary};\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:active {\n      border-color: ${cssVar.colorPrimaryActive};\n      color: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionPrimary: css`\n    color: ${cssVar.colorBgLayout};\n    background: ${cssVar.colorPrimary};\n\n    &:hover {\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionSecondary: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorFillSecondary};\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  actionText: css`\n    color: ${cssVar.colorPrimary};\n    background: transparent;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  actions: css`\n    display: flex;\n    flex-grow: 1;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    align-self: flex-end;\n    justify-content: flex-end;\n\n    margin-block-start: 8px;\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 20px;\n    margin-inline-start: auto;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    transition: all 0.2s;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  content: css`\n    overflow: hidden;\n    transition: opacity 0.2s;\n\n    &[data-behind] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-expanded] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n  `,\n\n  contentArea: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  `,\n\n  description: css`\n    margin: 0;\n    font-size: 13px;\n    line-height: 1.5;\n    color: ${cssVar.colorTextSecondary};\n  `,\n\n  descriptionStandalone: css`\n    color: ${cssVar.colorText};\n  `,\n\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  root: css`\n    --toast-gap: 12px;\n    --toast-peek: 12px;\n    --toast-scale: calc(1 - var(--toast-index) * 0.05);\n    --toast-shrink: calc(1 - var(--toast-scale));\n    --toast-collapsed-height: var(--toast-frontmost-height, var(--toast-height));\n\n    cursor: default;\n    user-select: none;\n\n    position: absolute;\n    z-index: calc(1000 - var(--toast-index));\n    inset-inline: 0;\n\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--toast-collapsed-height);\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-radius: var(--toast-border-radius, ${cssVar.borderRadiusLG});\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    background-clip: padding-box;\n    box-shadow:\n      0 0 0 1px ${cssVar.colorBorderSecondary},\n      0 4px 12px rgb(0 0 0 / 10%),\n      0 16px 32px -8px rgb(0 0 0 / 12%);\n\n    transition:\n      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 0.4s,\n      height 0.15s;\n\n    /* Fill gap between stacked toasts to prevent hover flicker */\n    &::after {\n      content: '';\n      position: absolute;\n      inset-inline: 0;\n      height: calc(var(--toast-gap) + var(--toast-peek) + 8px);\n    }\n\n    &[data-limited] {\n      opacity: 0;\n    }\n\n    &[data-swiping] {\n      transition: none;\n    }\n  `,\n\n  // Bottom positions - stack upward\n  rootBottom: css`\n    inset-block: auto 0;\n    transform-origin: bottom center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) -\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-start: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) *\n              var(--toast-gap) * -1\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(150%);\n      opacity: 0;\n    }\n  `,\n\n  // Top positions - stack downward\n  rootTop: css`\n    inset-block: 0 auto;\n    transform-origin: top center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) +\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-end: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) *\n              var(--toast-gap)\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(-150%);\n      opacity: 0;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n  `,\n\n  titleRow: css`\n    display: flex;\n    gap: 8px;\n    align-items: flex-start;\n  `,\n\n  toastBody: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  toastBodyCenter: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 100000;\n\n    width: 360px;\n    max-width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);\n\n    outline: 0;\n\n    @media (width <= 480px) {\n      width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);\n    }\n  `,\n\n  viewportBottom: css`\n    inset-block-end: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportBottomLeft: css`\n    inset-block-end: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: var(--toast-viewport-offset-x, 16px);\n  `,\n\n  viewportBottomRight: css`\n    inset-block-end: var(--toast-viewport-offset-y, 16px);\n    inset-inline-end: var(--toast-viewport-offset-x, 16px);\n  `,\n\n  viewportTop: css`\n    inset-block-start: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportTopLeft: css`\n    inset-block-start: var(--toast-viewport-offset-y, 16px);\n    inset-inline-start: var(--toast-viewport-offset-x, 16px);\n  `,\n\n  viewportTopRight: css`\n    inset-block-start: var(--toast-viewport-offset-y, 16px);\n    inset-inline-end: var(--toast-viewport-offset-x, 16px);\n  `,\n}));\n\nexport const viewportVariants = cva(styles.viewport, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.viewportBottom,\n      'bottom-left': styles.viewportBottomLeft,\n      'bottom-right': styles.viewportBottomRight,\n      'top': styles.viewportTop,\n      'top-left': styles.viewportTopLeft,\n      'top-right': styles.viewportTopRight,\n    },\n  },\n});\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.rootBottom,\n      'bottom-left': styles.rootBottom,\n      'bottom-right': styles.rootBottom,\n      'top': styles.rootTop,\n      'top-left': styles.rootTop,\n      'top-right': styles.rootTop,\n    },\n  },\n});\n\nexport const actionVariants = cva(styles.action, {\n  defaultVariants: {\n    variant: 'primary',\n  },\n  variants: {\n    variant: {\n      danger: styles.actionDanger,\n      ghost: styles.actionGhost,\n      primary: styles.actionPrimary,\n      secondary: styles.actionSecondary,\n      text: styles.actionText,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,eAAe;;;;;;;;;;MAUrC,UAAU;;CAGd,cAAc,GAAG;aACN,OAAO,cAAc;kBAChB,OAAO,WAAW;;;oBAGhB,OAAO,gBAAgB;;;;oBAIvB,OAAO,iBAAiB;;;MAGtC,eAAe,OAAO,UAAU,EAAE;;CAGtC,aAAa,GAAG;wBACM,OAAO,YAAY;aAC9B,OAAO,UAAU;;;;sBAIR,OAAO,aAAa;eAC3B,OAAO,aAAa;;;;sBAIb,OAAO,mBAAmB;eACjC,OAAO,mBAAmB;;;CAIvC,eAAe,GAAG;aACP,OAAO,cAAc;kBAChB,OAAO,aAAa;;;oBAGlB,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,iBAAiB,GAAG;aACT,OAAO,UAAU;kBACZ,OAAO,mBAAmB;;;oBAGxB,OAAO,kBAAkB;;;;oBAIzB,OAAO,UAAU;;;CAInC,YAAY,GAAG;aACJ,OAAO,aAAa;;;;oBAIb,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;CAYZ,OAAO,GAAG;;;;;;;;;;;;;qBAaS,OAAO,eAAe;;aAE9B,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;;;;CAeZ,aAAa,GAAG;;;;;;CAOhB,aAAa,GAAG;;;;aAIL,OAAO,mBAAmB;;CAGrC,uBAAuB,GAAG;aACf,OAAO,UAAU;;CAG5B,MAAM,GAAG;;;;;;CAOT,MAAM,GAAG;;;;;;;;;;;;;;;;;;;gDAmBqC,OAAO,eAAe;;aAEzD,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;kBAGvB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;CA2B5C,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCf,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCZ,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,UAAU,GAAG;;;;;CAMb,WAAW,GAAG;;;;;CAMd,iBAAiB,GAAG;;;;;CAMpB,UAAU,GAAG;;;;;;;;;;;;;CAcb,gBAAgB,GAAG;;;;;CAMnB,oBAAoB,GAAG;;;;CAKvB,qBAAqB,GAAG;;;;CAKxB,aAAa,GAAG;;;;;CAMhB,iBAAiB,GAAG;;;;CAKpB,kBAAkB,GAAG;;;;AAIvB,EAAE;AAEF,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,UAAU,eACZ;CACA,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;CACtB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,UAAU,eACZ;CACA,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;CACtB,EACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,WAAW,OAAO;EAClB,MAAM,OAAO;CACf,EACF;AACF,CAAC"}

package/es/base-ui/ToggleGroup/style.mjs

@@ -1,3 +1,4 @@
+import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/ToggleGroup/style.ts
@@ -41,10 +42,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       background: ${cssVar.colorFill};
     }
 
-    &:focus-visible {
-      outline: 2px solid ${cssVar.colorPrimaryBorder};
-      outline-offset: -2px;
-    }
+    ${focusRing};
 
     &[data-disabled] {
       cursor: not-allowed;

package/es/base-ui/ToggleGroup/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ToggleGroup/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  item: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: 4px;\n    align-items: center;\n    justify-content: center;\n\n    border: 0;\n    border-radius: ${cssVar.borderRadius};\n\n    font: inherit;\n    font-size: 12px;\n    color: ${cssVar.colorTextTertiary};\n    white-space: nowrap;\n\n    background: transparent;\n    outline: none;\n\n    transition:\n      background 120ms ${cssVar.motionEaseOut},\n      color 120ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled]) {\n      color: ${cssVar.colorTextSecondary};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &[data-pressed] {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &[data-pressed]:hover:not([data-disabled]) {\n      background: ${cssVar.colorFill};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: -2px;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n  `,\n  itemIcon: css`\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n  `,\n  itemLabel: css`\n    display: inline-flex;\n    align-items: center;\n  `,\n  itemMiddle: css`\n    height: 28px;\n    padding-inline: 8px;\n  `,\n  itemSmall: css`\n    height: 24px;\n    padding-inline: 6px;\n  `,\n  itemOutlined: css`\n    border-radius: 0;\n\n    & + & {\n      border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\n    }\n  `,\n  root: css`\n    display: inline-flex;\n    align-items: center;\n  `,\n  rootBorderless: css`\n    gap: 2px;\n  `,\n  rootOutlined: css`\n    overflow: hidden;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadius};\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: { variant: 'outlined' },\n  variants: {\n    variant: {\n      borderless: styles.rootBorderless,\n      outlined: styles.rootOutlined,\n    },\n  },\n});\n\nexport const itemVariants = cva(styles.item, {\n  defaultVariants: { size: 'middle', variant: 'outlined' },\n  variants: {\n    size: {\n      middle: styles.itemMiddle,\n      small: styles.itemSmall,\n    },\n    variant: {\n      borderless: null,\n      outlined: styles.itemOutlined,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;qBAWU,OAAO,aAAa;;;;aAI5B,OAAO,kBAAkB;;;;;;;yBAOb,OAAO,cAAc;oBAC1B,OAAO,cAAc;;;eAG1B,OAAO,mBAAmB;oBACrB,OAAO,mBAAmB;;;;eAI/B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;oBAI1B,OAAO,UAAU;;;;2BAIV,OAAO,mBAAmB;;;;;;eAMtC,OAAO,kBAAkB;;;CAGtC,UAAU,GAAG;;;;;CAKb,WAAW,GAAG;;;;CAId,YAAY,GAAG;;;;CAIf,WAAW,GAAG;;;;CAId,cAAc,GAAG;;;;uCAIoB,OAAO,qBAAqB;;;CAGjE,MAAM,GAAG;;;;CAIT,gBAAgB,GAAG;;;CAGnB,cAAc,GAAG;;wBAEK,OAAO,qBAAqB;qBAC/B,OAAO,aAAa;;AAEzC,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,WAAW;CACvC,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EAAE,MAAM;EAAU,SAAS;CAAW;CACvD,UAAU;EACR,MAAM;GACJ,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,YAAY;GACZ,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ToggleGroup/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  item: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: 4px;\n    align-items: center;\n    justify-content: center;\n\n    border: 0;\n    border-radius: ${cssVar.borderRadius};\n\n    font: inherit;\n    font-size: 12px;\n    color: ${cssVar.colorTextTertiary};\n    white-space: nowrap;\n\n    background: transparent;\n    outline: none;\n\n    transition:\n      background 120ms ${cssVar.motionEaseOut},\n      color 120ms ${cssVar.motionEaseOut};\n\n    &:hover:not([data-disabled]) {\n      color: ${cssVar.colorTextSecondary};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &[data-pressed] {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &[data-pressed]:hover:not([data-disabled]) {\n      background: ${cssVar.colorFill};\n    }\n\n    ${focusRing};\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n    }\n  `,\n  itemIcon: css`\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n  `,\n  itemLabel: css`\n    display: inline-flex;\n    align-items: center;\n  `,\n  itemMiddle: css`\n    height: 28px;\n    padding-inline: 8px;\n  `,\n  itemSmall: css`\n    height: 24px;\n    padding-inline: 6px;\n  `,\n  itemOutlined: css`\n    border-radius: 0;\n\n    & + & {\n      border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\n    }\n  `,\n  root: css`\n    display: inline-flex;\n    align-items: center;\n  `,\n  rootBorderless: css`\n    gap: 2px;\n  `,\n  rootOutlined: css`\n    overflow: hidden;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadius};\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: { variant: 'outlined' },\n  variants: {\n    variant: {\n      borderless: styles.rootBorderless,\n      outlined: styles.rootOutlined,\n    },\n  },\n});\n\nexport const itemVariants = cva(styles.item, {\n  defaultVariants: { size: 'middle', variant: 'outlined' },\n  variants: {\n    size: {\n      middle: styles.itemMiddle,\n      small: styles.itemSmall,\n    },\n    variant: {\n      borderless: null,\n      outlined: styles.itemOutlined,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;qBAWU,OAAO,aAAa;;;;aAI5B,OAAO,kBAAkB;;;;;;;yBAOb,OAAO,cAAc;oBAC1B,OAAO,cAAc;;;eAG1B,OAAO,mBAAmB;oBACrB,OAAO,mBAAmB;;;;eAI/B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;oBAI1B,OAAO,UAAU;;;MAG/B,UAAU;;;;eAID,OAAO,kBAAkB;;;CAGtC,UAAU,GAAG;;;;;CAKb,WAAW,GAAG;;;;CAId,YAAY,GAAG;;;;CAIf,WAAW,GAAG;;;;CAId,cAAc,GAAG;;;;uCAIoB,OAAO,qBAAqB;;;CAGjE,MAAM,GAAG;;;;CAIT,gBAAgB,GAAG;;;CAGnB,cAAc,GAAG;;wBAEK,OAAO,qBAAqB;qBAC/B,OAAO,aAAa;;AAEzC,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,WAAW;CACvC,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EAAE,MAAM;EAAU,SAAS;CAAW;CACvD,UAAU;EACR,MAAM;GACJ,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,YAAY;GACZ,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}

package/es/base-ui/focusRing.mjs

@@ -0,0 +1,31 @@
+import { css, cssVar, keyframes } from "antd-style";
+//#region src/base-ui/focusRing.ts
+const tint = (color, alpha) => `color-mix(in srgb, ${color} ${alpha}%, transparent)`;
+const glow = (color, scale = 1) => `0 0 0 ${3 * scale}px ${tint(color, 70)}, 0 0 ${5 * scale}px ${4 * scale}px ${tint(color, 35)}`;
+const ringIn = (color) => keyframes`
+  from {
+    box-shadow: ${glow(color, 2.5)};
+  }
+`;
+const ring = (color) => css`
+  &:focus-visible {
+    outline: none;
+    box-shadow: ${glow(color)};
+    animation: ${ringIn(color)} 560ms cubic-bezier(0.32, 0.72, 0, 1);
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+
+    @media (forced-colors: active) {
+      outline: 2px solid CanvasText;
+      animation: none;
+    }
+  }
+`;
+const focusRing = ring(cssVar.colorInfo);
+const focusRingColor = ring;
+//#endregion
+export { focusRing, focusRingColor };
+
+//# sourceMappingURL=focusRing.mjs.map

package/es/base-ui/focusRing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusRing.mjs","names":[],"sources":["../../src/base-ui/focusRing.ts"],"sourcesContent":["import { css, cssVar, keyframes } from 'antd-style';\n\nconst tint = (color: string, alpha: number) =>\n  `color-mix(in srgb, ${color} ${alpha}%, transparent)`;\n\nconst glow = (color: string, scale = 1) =>\n  `0 0 0 ${3 * scale}px ${tint(color, 70)}, 0 0 ${5 * scale}px ${4 * scale}px ${tint(color, 35)}`;\n\nconst ringIn = (color: string) => keyframes`\n  from {\n    box-shadow: ${glow(color, 2.5)};\n  }\n`;\n\nconst ring = (color: string) => css`\n  &:focus-visible {\n    outline: none;\n    box-shadow: ${glow(color)};\n    animation: ${ringIn(color)} 560ms cubic-bezier(0.32, 0.72, 0, 1);\n\n    @media (prefers-reduced-motion: reduce) {\n      animation: none;\n    }\n\n    @media (forced-colors: active) {\n      outline: 2px solid CanvasText;\n      animation: none;\n    }\n  }\n`;\n\nexport const focusRing = ring(cssVar.colorInfo);\n\nexport const focusRingColor = ring;\n"],"mappings":";;AAEA,MAAM,QAAQ,OAAe,UAC3B,sBAAsB,MAAM,GAAG,MAAM;AAEvC,MAAM,QAAQ,OAAe,QAAQ,MACnC,SAAS,IAAI,MAAM,KAAK,KAAK,OAAO,EAAE,EAAE,QAAQ,IAAI,MAAM,KAAK,IAAI,MAAM,KAAK,KAAK,OAAO,EAAE;AAE9F,MAAM,UAAU,UAAkB,SAAS;;kBAEzB,KAAK,OAAO,GAAG,EAAE;;;AAInC,MAAM,QAAQ,UAAkB,GAAG;;;kBAGjB,KAAK,KAAK,EAAE;iBACb,OAAO,KAAK,EAAE;;;;;;;;;;;;AAa/B,MAAa,YAAY,KAAK,OAAO,SAAS;AAE9C,MAAa,iBAAiB"}

package/es/eslint/index.mjs

@@ -17,6 +17,13 @@ const DEPRECATED_UI_COMPONENTS = [
 	"RadioGroup",
 	"Segmented",
 	"Select",
+	"Skeleton",
+	"SkeletonAvatar",
+	"SkeletonBlock",
+	"SkeletonButton",
+	"SkeletonParagraph",
+	"SkeletonTags",
+	"SkeletonTitle",
 	"Slider",
 	"SliderWithInput",
 	"Switch",
@@ -63,6 +70,8 @@ const restrictedImports = { rules: { "no-restricted-imports": ["error", {
 			"antd/es/notification/*",
 			"antd/es/radio",
 			"antd/es/radio/*",
+			"antd/es/skeleton",
+			"antd/es/skeleton/*",
 			"antd/es/slider",
 			"antd/es/slider/*",
 			"antd/es/switch",
@@ -81,6 +90,8 @@ const restrictedImports = { rules: { "no-restricted-imports": ["error", {
 			"antd/lib/notification/*",
 			"antd/lib/radio",
 			"antd/lib/radio/*",
+			"antd/lib/skeleton",
+			"antd/lib/skeleton/*",
 			"antd/lib/slider",
 			"antd/lib/slider/*",
 			"antd/lib/switch",

package/es/eslint/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/eslint/index.ts"],"sourcesContent":["const DEPRECATED_UI_COMPONENTS = [\n  'ActionIcon',\n  'Alert',\n  'AutoComplete',\n  'Avatar',\n  'Button',\n  'Checkbox',\n  'CheckboxGroup',\n  'Drawer',\n  'Dropdown',\n  'FormSubmitFooter',\n  'FormTitle',\n  'InputOPT',\n  'Modal',\n  'Radio',\n  'RadioGroup',\n  'Segmented',\n  'Select',\n  'Slider',\n  'SliderWithInput',\n  'Switch',\n  'Tabs',\n  'Tag',\n  'Text',\n];\n\nconst DEPRECATED_ANTD_COMPONENT_PATHS = [\n  'antd/es/alert',\n  'antd/es/alert/*',\n  'antd/es/auto-complete',\n  'antd/es/auto-complete/*',\n  'antd/es/checkbox',\n  'antd/es/checkbox/*',\n  'antd/es/dropdown',\n  'antd/es/dropdown/*',\n  'antd/es/message',\n  'antd/es/message/*',\n  'antd/es/notification',\n  'antd/es/notification/*',\n  'antd/es/radio',\n  'antd/es/radio/*',\n  'antd/es/slider',\n  'antd/es/slider/*',\n  'antd/es/switch',\n  'antd/es/switch/*',\n  'antd/lib/alert',\n  'antd/lib/alert/*',\n  'antd/lib/auto-complete',\n  'antd/lib/auto-complete/*',\n  'antd/lib/checkbox',\n  'antd/lib/checkbox/*',\n  'antd/lib/dropdown',\n  'antd/lib/dropdown/*',\n  'antd/lib/message',\n  'antd/lib/message/*',\n  'antd/lib/notification',\n  'antd/lib/notification/*',\n  'antd/lib/radio',\n  'antd/lib/radio/*',\n  'antd/lib/slider',\n  'antd/lib/slider/*',\n  'antd/lib/switch',\n  'antd/lib/switch/*',\n];\n\nexport const restrictedImports = {\n  rules: {\n    'no-restricted-imports': [\n      'error',\n      {\n        paths: [\n          {\n            importNames: DEPRECATED_UI_COMPONENTS,\n            message:\n              'The antd-based wrapper is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n            name: '@lobehub/ui',\n          },\n          {\n            importNames: ['createStyles'],\n            message:\n              '`createStyles` is banned in this project. Use `createStaticStyles` from \"antd-style\" instead.',\n            name: 'antd-style',\n          },\n          {\n            importNames: DEPRECATED_UI_COMPONENTS,\n            message: 'Direct antd import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n            name: 'antd',\n          },\n          {\n            importNames: ['message', 'notification'],\n            message: 'antd feedback APIs are deprecated. Use `toast` from \"@lobehub/ui/base-ui\".',\n            name: 'antd',\n          },\n        ],\n        patterns: [\n          {\n            group: DEPRECATED_ANTD_COMPONENT_PATHS,\n            message:\n              'Direct antd component import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n          },\n        ],\n      },\n    ],\n  },\n};\n\nexport default [restrictedImports];\n"],"mappings":";AAAA,MAAM,2BAA2B;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAyCA,MAAa,oBAAoB,EAC/B,OAAO,EACL,yBAAyB,CACvB,SACA;CACE,OAAO;EACL;GACE,aAAa;GACb,SACE;GACF,MAAM;EACR;EACA;GACE,aAAa,CAAC,cAAc;GAC5B,SACE;GACF,MAAM;EACR;EACA;GACE,aAAa;GACb,SAAS;GACT,MAAM;EACR;EACA;GACE,aAAa,CAAC,WAAW,cAAc;GACvC,SAAS;GACT,MAAM;EACR;CACF;CACA,UAAU,CACR;EACE,OAAO;GArEjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EAkCiB;EACP,SACE;CACJ,CACF;AACF,CACF,EACF,EACF;AAEA,IAAA,iBAAe,CAAC,iBAAiB"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/eslint/index.ts"],"sourcesContent":["const DEPRECATED_UI_COMPONENTS = [\n  'ActionIcon',\n  'Alert',\n  'AutoComplete',\n  'Avatar',\n  'Button',\n  'Checkbox',\n  'CheckboxGroup',\n  'Drawer',\n  'Dropdown',\n  'FormSubmitFooter',\n  'FormTitle',\n  'InputOPT',\n  'Modal',\n  'Radio',\n  'RadioGroup',\n  'Segmented',\n  'Select',\n  'Skeleton',\n  'SkeletonAvatar',\n  'SkeletonBlock',\n  'SkeletonButton',\n  'SkeletonParagraph',\n  'SkeletonTags',\n  'SkeletonTitle',\n  'Slider',\n  'SliderWithInput',\n  'Switch',\n  'Tabs',\n  'Tag',\n  'Text',\n];\n\nconst DEPRECATED_ANTD_COMPONENT_PATHS = [\n  'antd/es/alert',\n  'antd/es/alert/*',\n  'antd/es/auto-complete',\n  'antd/es/auto-complete/*',\n  'antd/es/checkbox',\n  'antd/es/checkbox/*',\n  'antd/es/dropdown',\n  'antd/es/dropdown/*',\n  'antd/es/message',\n  'antd/es/message/*',\n  'antd/es/notification',\n  'antd/es/notification/*',\n  'antd/es/radio',\n  'antd/es/radio/*',\n  'antd/es/skeleton',\n  'antd/es/skeleton/*',\n  'antd/es/slider',\n  'antd/es/slider/*',\n  'antd/es/switch',\n  'antd/es/switch/*',\n  'antd/lib/alert',\n  'antd/lib/alert/*',\n  'antd/lib/auto-complete',\n  'antd/lib/auto-complete/*',\n  'antd/lib/checkbox',\n  'antd/lib/checkbox/*',\n  'antd/lib/dropdown',\n  'antd/lib/dropdown/*',\n  'antd/lib/message',\n  'antd/lib/message/*',\n  'antd/lib/notification',\n  'antd/lib/notification/*',\n  'antd/lib/radio',\n  'antd/lib/radio/*',\n  'antd/lib/skeleton',\n  'antd/lib/skeleton/*',\n  'antd/lib/slider',\n  'antd/lib/slider/*',\n  'antd/lib/switch',\n  'antd/lib/switch/*',\n];\n\nexport const restrictedImports = {\n  rules: {\n    'no-restricted-imports': [\n      'error',\n      {\n        paths: [\n          {\n            importNames: DEPRECATED_UI_COMPONENTS,\n            message:\n              'The antd-based wrapper is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n            name: '@lobehub/ui',\n          },\n          {\n            importNames: ['createStyles'],\n            message:\n              '`createStyles` is banned in this project. Use `createStaticStyles` from \"antd-style\" instead.',\n            name: 'antd-style',\n          },\n          {\n            importNames: DEPRECATED_UI_COMPONENTS,\n            message: 'Direct antd import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n            name: 'antd',\n          },\n          {\n            importNames: ['message', 'notification'],\n            message: 'antd feedback APIs are deprecated. Use `toast` from \"@lobehub/ui/base-ui\".',\n            name: 'antd',\n          },\n        ],\n        patterns: [\n          {\n            group: DEPRECATED_ANTD_COMPONENT_PATHS,\n            message:\n              'Direct antd component import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n          },\n        ],\n      },\n    ],\n  },\n};\n\nexport default [restrictedImports];\n"],"mappings":";AAAA,MAAM,2BAA2B;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AA6CA,MAAa,oBAAoB,EAC/B,OAAO,EACL,yBAAyB,CACvB,SACA;CACE,OAAO;EACL;GACE,aAAa;GACb,SACE;GACF,MAAM;EACR;EACA;GACE,aAAa,CAAC,cAAc;GAC5B,SACE;GACF,MAAM;EACR;EACA;GACE,aAAa;GACb,SAAS;GACT,MAAM;EACR;EACA;GACE,aAAa,CAAC,WAAW,cAAc;GACvC,SAAS;GACT,MAAM;EACR;CACF;CACA,UAAU,CACR;EACE,OAAO;GAzEjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EAkCiB;EACP,SACE;CACJ,CACF;AACF,CACF,EACF,EACF;AAEA,IAAA,iBAAe,CAAC,iBAAiB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.38.0",
+  "version": "5.39.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",