@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
1 lines • 2.92 kB
Source Map (JSON)
{"version":3,"sources":["webpack://./src/components/ui/tabs.module.css"],"names":[],"mappings":"AAIA;EAHE,yCAAyC;EACzC,UAAU;EACV,uBAAuB;EACvB,MAAM;EACN,iBAAiB;EACjB,aAAa;EACb,kBAAkB;AACpB;;AAMA;EAHE,gBAAgB;EAChB,iCAAiC;EACjC,eAAe;EACf,oBAAoB;EACpB,4BAA4B;EAC5B,eAAe;EACf,gBAAgB;EAChB,iCAAiC;EACjC,2CAA2C;EAC3C,yBAAyB;EACzB,iBAAiB;EACjB,mBAAmB;EACnB,oBAAoB;EACpB,gBAAgB;EAChB,SAAS;EACT,aAAa;EACb,uBAAuB;EACvB,mBAAmB;EACnB,SAAS;EACT,gBAAgB;EAChB,aAAa;;EAKb;IAFE,2BAA2B;EAC7B;;EAKA;IACE;MAFE,2BAA2B;IAC7B;EACF;;EAKA;IAFE,kBAAkB;;IAKlB;MAFE,kCAAkC;MAClC,WAAW;MACX,0BAA0B;MAC1B,iCAAiC;MACjC,oBAAoB;MACpB,kBAAkB;IACpB;EACF;AACF;;AAKA;EAFE,sCAAsC;EACtC,WAAW;EACX,mCAAmC;EACnC,8BAA8B;EAC9B,UAAU;EACV,qCAAqC;EACrC,wBAAwB;EACxB,uCAAuC;EACvC,kBAAkB;EAClB,YAAY;EACZ,OAAO;AACT;;AAKA;EAFE,8BAA8B;EAC9B,aAAa;EACb,kBAAkB;;EAKlB;IAFE,kCAAkC;IAClC,iCAAiC;IACjC,oBAAoB;EACtB;;EAKA;IAFE,aAAa;EACf;AACF","sourcesContent":[".root {\r\n /* Minimal default — consumers can add borders/background via className */\r\n}\r\n\r\n.list {\r\n display: flex;\r\n position: relative;\r\n z-index: 0;\r\n padding-inline: 0;\r\n gap: 0;\r\n border-bottom: 1px solid var(--ac-border);\r\n background-color: transparent;\r\n}\r\n\r\n.tab {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 0;\r\n margin: 0;\r\n outline: none;\r\n background: none;\r\n appearance: none;\r\n color: var(--ac-muted-foreground);\r\n font-family: inherit;\r\n font-size: var(--ac-text-sm);\r\n font-weight: 500;\r\n user-select: none;\r\n white-space: nowrap;\r\n word-break: keep-all;\r\n padding-inline: var(--ac-space-3);\r\n padding-block: 0;\r\n height: 2.25rem;\r\n cursor: pointer;\r\n transition: color var(--ac-transition-fast);\r\n\r\n &[data-active] {\r\n color: var(--ac-foreground);\r\n }\r\n\r\n @media (hover: hover) {\r\n &:hover {\r\n color: var(--ac-foreground);\r\n }\r\n }\r\n\r\n &:focus-visible {\r\n position: relative;\r\n\r\n &::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: var(--ac-space-1) 0;\r\n border-radius: var(--ac-radius-xs);\r\n outline: 2px solid var(--ac-ring);\r\n outline-offset: -1px;\r\n }\r\n }\r\n}\r\n\r\n.indicator {\r\n position: absolute;\r\n z-index: 0;\r\n left: 0;\r\n bottom: -1px;\r\n translate: var(--active-tab-left) 0;\r\n width: var(--active-tab-width);\r\n height: 2px;\r\n background-color: var(--ac-foreground);\r\n transition-property: translate, width;\r\n transition-duration: 200ms;\r\n transition-timing-function: ease-in-out;\r\n}\r\n\r\n.panel {\r\n position: relative;\r\n outline: none;\r\n padding-top: var(--ac-space-4);\r\n\r\n &:focus-visible {\r\n outline: 2px solid var(--ac-ring);\r\n outline-offset: -1px;\r\n border-radius: var(--ac-radius-md);\r\n }\r\n\r\n &[hidden] {\r\n display: none;\r\n }\r\n}\r\n"],"sourceRoot":""}