@arolariu/components 0.4.2 → 1.0.0

package/src/components/ui/dropdrawer.module.css

@@ -0,0 +1,322 @@
+.drawerOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: rgb(0 0 0 / 0.55);
+  transition: opacity var(--ac-transition-normal);
+
+  @supports (-webkit-touch-callout: none) {
+    position: absolute;
+  }
+}
+
+.drawerOverlay[data-starting-style],
+.drawerOverlay[data-ending-style] {
+  opacity: 0;
+}
+
+.drawerViewport {
+  position: fixed;
+  inset: 0;
+  z-index: 51;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.drawerContent {
+  pointer-events: auto;
+  position: relative;
+  inset-inline: 0;
+  display: flex;
+  width: min(100%, 48rem);
+  max-height: 95vh;
+  flex-direction: column;
+  margin-top: 6rem;
+  padding: 1rem 1rem 1.5rem;
+  border: 1px solid var(--ac-border);
+  border-bottom: 0;
+  border-radius: var(--ac-radius-lg) var(--ac-radius-lg) 0 0;
+  background: var(--ac-popover);
+  color: var(--ac-popover-foreground);
+  box-shadow: 0 -16px 40px -16px rgb(0 0 0 / 0.35);
+  transition: opacity var(--ac-transition-normal), transform var(--ac-transition-normal);
+}
+
+.drawerContent[data-starting-style],
+.drawerContent[data-ending-style] {
+  opacity: 0;
+  transform: translateY(1rem);
+}
+
+.drawerInnerContent {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+}
+
+.drawerHandle {
+  width: 4rem;
+  height: 0.25rem;
+  margin: 0 auto 1rem;
+  border-radius: 9999px;
+  background: var(--ac-border);
+}
+
+.drawerHeader {
+  display: grid;
+  gap: 0.375rem;
+  padding: 0 0 1rem;
+  text-align: center;
+}
+
+.drawerTitle {
+  font-size: var(--ac-text-lg);
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+.drawerFooter,
+.mobileFooter {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: auto;
+  padding-top: 1rem;
+}
+
+.desktopFooter {
+  padding: 0.5rem;
+}
+
+.dropdownPositioner {
+  z-index: 50;
+}
+
+.dropdownContent,
+.dropdownSubContent,
+.desktopContent {
+  min-width: 13.75rem;
+  overflow: hidden auto;
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-md);
+  background: var(--ac-popover);
+  color: var(--ac-popover-foreground);
+  box-shadow: 0 16px 40px -16px rgb(0 0 0 / 0.35);
+  transition: opacity var(--ac-transition-normal), transform var(--ac-transition-normal);
+}
+
+.dropdownContent[data-starting-style],
+.dropdownContent[data-ending-style],
+.dropdownSubContent[data-starting-style],
+.dropdownSubContent[data-ending-style],
+.desktopContent[data-starting-style],
+.desktopContent[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.96);
+}
+
+.dropdownContent,
+.desktopContent {
+  max-height: min(70vh, var(--available-height, 70vh));
+  padding: 0.25rem;
+}
+
+.dropdownSubContent {
+  max-height: min(60vh, var(--available-height, 60vh));
+  padding: 0.25rem;
+}
+
+.desktopItem,
+.desktopSubTrigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2rem;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--ac-radius-sm);
+  color: inherit;
+  cursor: default;
+  user-select: none;
+  font-size: var(--ac-text-sm);
+  outline: none;
+}
+
+.desktopItem[data-highlighted],
+.desktopSubTrigger[data-highlighted],
+.desktopSubTrigger[data-popup-open] {
+  background: var(--ac-accent);
+  color: var(--ac-accent-foreground);
+}
+
+.desktopItem[data-disabled],
+.desktopSubTrigger[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.desktopLabel {
+  padding: 0.375rem 0.5rem;
+  font-size: var(--ac-text-sm);
+  font-weight: 600;
+}
+
+.desktopSeparator {
+  height: 1px;
+  margin: 0.25rem -0.25rem;
+  background: var(--ac-border);
+}
+
+.mobileContent {
+  max-height: 90vh;
+}
+
+.mobileHeaderRow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.backButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0.25rem;
+  border: 0;
+  border-radius: 9999px;
+  background: transparent;
+  color: inherit;
+}
+
+.backButton:hover {
+  background: color-mix(in oklch, var(--ac-muted), transparent 50%);
+}
+
+.backButton:focus-visible,
+.mobileItem:focus-visible {
+  outline: 2px solid var(--ac-ring);
+  outline-offset: 2px;
+}
+
+.mobileViewport,
+.mobileMainViewport {
+  overflow-y: auto;
+}
+
+.mobileViewport {
+  position: relative;
+  flex: 1;
+  max-height: 70vh;
+}
+
+.mobileMainViewport {
+  max-height: 70vh;
+}
+
+.mobileMotionPanel {
+  width: 100%;
+  min-height: 100%;
+  padding-bottom: 1.5rem;
+}
+
+.screenReaderOnlyHeader {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.mobileItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 1rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mobileStandaloneItem {
+  margin: 0.375rem 0.5rem;
+  border-radius: var(--ac-radius-md);
+  background: var(--ac-muted);
+}
+
+.mobileGroupedItem {
+  background: transparent;
+}
+
+.mobileLabelWrapper {
+  padding: 0;
+}
+
+.mobileLabel {
+  padding: 0.5rem 1rem;
+  font-size: var(--ac-text-sm);
+  font-weight: 500;
+  color: var(--ac-muted-foreground);
+}
+
+.mobileGroup {
+  margin: 0.75rem 0.5rem;
+  overflow: hidden;
+  border-radius: var(--ac-radius-xl);
+  background: var(--ac-muted);
+}
+
+.mobileGroupSeparator {
+  height: 1px;
+  background: var(--ac-border);
+}
+
+.itemRow,
+.itemChildren {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.itemRow {
+  width: 100%;
+  justify-content: space-between;
+}
+
+.itemIcon {
+  flex-shrink: 0;
+}
+
+.chevron {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.inset {
+  padding-left: 2rem;
+}
+
+.mobileItem[data-disabled="true"] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+@media (min-width: 640px) {
+  .drawerHeader {
+    text-align: left;
+  }
+}