@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 • 4.13 kB
Source Map (JSON)
{"version":3,"sources":["webpack://./src/components/ui/combobox.module.css"],"names":[],"mappings":"AAMA;EALE,iBAAiB;AACnB;;AASA;EANE,8BAA8B;EAC9B,WAAW;EACX,gBAAgB;AAClB;;AASA;EANE,gBAAgB;EAChB,uBAAuB;EACvB,mBAAmB;EACnB,OAAO;EACP,gBAAgB;AAClB;;AASA;EANE,4BAA4B;AAC9B;;AASA;EANE,YAAY;EACZ,gCAAgC;EAChC,WAAW;EACX,cAAc;EACd,WAAW;AACb;;AAUA;EAPE,gBAAgB;EAChB,0BAA0B;EAC1B,UAAU;AACZ;;AAWA;EARE,gBAAgB;EAChB,YAAY;AACd;;AAWA;EARE,8CAA8C;EAC9C,gBAAgB;AAClB;;AAWA;EARE,iBAAiB;EACjB,gBAAgB;AAClB;;AAYA;EATE,kCAAkC;EAClC,eAAe;EACf,mBAAmB;EACnB,wBAAwB;EACxB,gDAAgD;EAChD,gCAAgC;EAChC,aAAa;AACf;;AAYA;EATE,uCAAuC;AACzC;;AAYA;EATE,WAAW;EACX,oBAAoB;AACtB;;AAYA;EATE,uCAAuC;AACzC;;AAYA;EATE,UAAU;EACV,cAAc;EACd,WAAW;EACX,YAAY;EACZ,uBAAuB;AACzB;;AAYA;EATE,UAAU;AACZ;;AAYA;EATE,uBAAuB;EACvB,mBAAmB;EACnB,OAAO;EACP,gBAAgB;AAClB;;AAaA;EAVE,4BAA4B;EAC5B,iCAAiC;EACjC,gDAAgD;EAChD,kBAAkB;AACpB;;AAcA;EAXE,8BAA8B;AAChC;;AAeA;EAZE,uCAAuC;EACvC,WAAW;EACX,6BAA6B;AAC/B;;AAgBA;EAbE,4BAA4B;AAC9B;;AAgBA;EAbE,0CAA0C;AAC5C;;AAgBA;EAbE,uCAAuC;AACzC;;AAgBA;EAbE,uCAAuC;AACzC;;AAgBA;EAbE,4BAA4B;AAC9B;;AAgBA;EAbE,uCAAuC;AACzC;;AAiBA;EAKE;IAlBE,gBAAgB;EAClB;AACF","sourcesContent":["/**\r\n * Combobox component styles\r\n * Compound component combining Command, Popover, and Button\r\n */\r\n\r\n/* Root container */\r\n.combobox {\r\n display: contents;\r\n}\r\n\r\n/* Trigger button */\r\n.trigger {\r\n justify-content: space-between;\r\n width: 100%;\r\n min-width: 200px;\r\n}\r\n\r\n.triggerValue {\r\n flex: 1;\r\n text-align: left;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.triggerPlaceholder {\r\n color: var(--ac-neutral-500);\r\n}\r\n\r\n.triggerIcon {\r\n margin-left: var(--ac-spacing-2);\r\n height: 1rem;\r\n width: 1rem;\r\n flex-shrink: 0;\r\n opacity: 0.5;\r\n}\r\n\r\n/* Popover content */\r\n.content {\r\n width: var(--anchor-width);\r\n min-width: 200px;\r\n padding: 0;\r\n}\r\n\r\n/* Command container */\r\n.command {\r\n border: none;\r\n box-shadow: none;\r\n}\r\n\r\n.commandInput {\r\n border-bottom: 1px solid var(--ac-neutral-200);\r\n border-radius: 0;\r\n}\r\n\r\n.commandList {\r\n max-height: 300px;\r\n overflow-y: auto;\r\n}\r\n\r\n/* Items */\r\n.item {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--ac-spacing-2);\r\n cursor: pointer;\r\n padding: var(--ac-spacing-2) var(--ac-spacing-3);\r\n border-radius: var(--ac-radius-sm);\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.item:hover {\r\n background-color: var(--ac-neutral-100);\r\n}\r\n\r\n.item[data-disabled] {\r\n opacity: 0.5;\r\n pointer-events: none;\r\n}\r\n\r\n.itemSelected {\r\n background-color: var(--ac-neutral-100);\r\n}\r\n\r\n.itemCheck {\r\n height: 1rem;\r\n width: 1rem;\r\n flex-shrink: 0;\r\n opacity: 0;\r\n transition: opacity 0.2s;\r\n}\r\n\r\n.itemCheckVisible {\r\n opacity: 1;\r\n}\r\n\r\n.itemLabel {\r\n flex: 1;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n/* Empty state */\r\n.empty {\r\n padding: var(--ac-spacing-6) var(--ac-spacing-4);\r\n text-align: center;\r\n color: var(--ac-neutral-500);\r\n font-size: var(--ac-font-size-sm);\r\n}\r\n\r\n/* Group */\r\n.group {\r\n padding: var(--ac-spacing-1) 0;\r\n}\r\n\r\n/* Separator */\r\n.separator {\r\n margin: var(--ac-spacing-1) 0;\r\n height: 1px;\r\n background-color: var(--ac-neutral-200);\r\n}\r\n\r\n/* Dark mode */\r\n:global(.dark) .triggerPlaceholder {\r\n color: var(--ac-neutral-400);\r\n}\r\n\r\n:global(.dark) .commandInput {\r\n border-bottom-color: var(--ac-neutral-700);\r\n}\r\n\r\n:global(.dark) .item:hover {\r\n background-color: var(--ac-neutral-800);\r\n}\r\n\r\n:global(.dark) .itemSelected {\r\n background-color: var(--ac-neutral-800);\r\n}\r\n\r\n:global(.dark) .empty {\r\n color: var(--ac-neutral-400);\r\n}\r\n\r\n:global(.dark) .separator {\r\n background-color: var(--ac-neutral-700);\r\n}\r\n\r\n/* Responsive adjustments */\r\n@media (max-width: 640px) {\r\n .trigger {\r\n min-width: 150px;\r\n }\r\n\r\n .content {\r\n min-width: 150px;\r\n }\r\n}\r\n"],"sourceRoot":""}