@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.26 kB
Source Map (JSON)
{"version":3,"sources":["webpack://./src/components/ui/typewriter.module.css"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,eAAe;EACf,gBAAgB;AAClB;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,qBAAqB;AACvB;;AAEA;EACE,UAAU;EACV,aAAa;AACf;;AAGA;EAAE,2BAA2B;AAC7B;;AAGA;EAAE,kCAAkC;EAClC,mBAAmB;EACnB,UAAU;EACV,qBAAqB;AACvB;;AAIA;EADE,YAAY;AACd;;AAIA;EADE,WAAW;EACX,gBAAgB;EAChB,aAAa;AACf;;AAIA;EADE,qBAAqB;EACrB,gBAAgB;AAClB;;AAIA;EADE,mBAAmB;EACnB,iBAAiB;EACjB,gBAAgB;AAClB;;AAIA;EADE,YAAY;EACZ,cAAc;AAChB;;AAIA;EACE;IADE,kBAAkB;EACpB;;EAIA;IADE,cAAc;EAChB;;EAIA;IADE,eAAe;EACjB;;EAIA;IADE,cAAc;EAChB;AACF;;AAIA;EACE;IADE,mBAAmB;EACrB;AACF;;AAIA;EACE;IADE,eAAe;EACjB;;EAIA;IADE,cAAc;EAChB;AACF;;AAIA;EACE;IADE,eAAe;EACjB;;EAIA;IADE,YAAY;EACd;AACF","sourcesContent":[".root {\r\n font-size: 1rem;\r\n font-weight: 700;\r\n text-align: center;\r\n}\r\n\r\n.inline {\r\n display: inline;\r\n}\r\n\r\n.word {\r\n display: inline-block;\r\n}\r\n\r\n.hiddenCharacter {\r\n display: none;\r\n color: var(--ac-foreground);\r\n opacity: 0;\r\n}\r\n\r\n.visibleCharacter {\r\n color: var(--ac-foreground);\r\n}\r\n\r\n.cursor,\r\n.smoothCursor {\r\n display: inline-block;\r\n width: 4px;\r\n border-radius: var(--ac-radius-xs);\r\n background: #3b82f6;\r\n}\r\n\r\n.cursor {\r\n height: 1rem;\r\n}\r\n\r\n.smoothRoot {\r\n display: flex;\r\n gap: 0.25rem;\r\n margin: 1.5rem 0;\r\n}\r\n\r\n.smoothViewport {\r\n overflow: hidden;\r\n padding-bottom: 0.5rem;\r\n}\r\n\r\n.smoothText {\r\n white-space: nowrap;\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n}\r\n\r\n.smoothCursor {\r\n display: block;\r\n height: 1rem;\r\n}\r\n\r\n@media (min-width: 640px) {\r\n .root {\r\n font-size: 1.25rem;\r\n }\r\n\r\n .cursor {\r\n height: 1.5rem;\r\n }\r\n\r\n .smoothText {\r\n font-size: 1rem;\r\n }\r\n\r\n .smoothCursor {\r\n height: 1.5rem;\r\n }\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .root {\r\n font-size: 1.875rem;\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .root {\r\n font-size: 3rem;\r\n }\r\n\r\n .cursor {\r\n height: 2.5rem;\r\n }\r\n}\r\n\r\n@media (min-width: 1280px) {\r\n .smoothText {\r\n font-size: 3rem;\r\n }\r\n\r\n .smoothCursor {\r\n height: 3rem;\r\n }\r\n}\r\n"],"sourceRoot":""}