@drivy/cobalt 0.51.0 → 1.0.0-beta.1

package/styles/components/Form/Slider.scss

@@ -1,75 +1,66 @@
-@import "@reach/slider/styles.css";
+.cobalt-slider {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
 
-.cobalt- {
-  &slider {
-    $self: &;
-
-    @include withContext(".cobalt-FormField--withHint >") {
-      padding-bottom: spacing(sm);
-    }
-
-    width: 100%;
+  &--withHint {
+    @apply c-pb-sm;
+  }
 
-    [data-reach-slider-input][data-orientation="horizontal"] {
-      height: 3px;
-      padding-top: spacing(sm);
-      padding-bottom: spacing(sm);
-      width: 100%;
-    }
+  &__value-meta {
+    @apply c-text-subdued;
+  }
 
-    [data-reach-slider-track] {
-      @include fill-bg-color(subdued);
-    }
+  &__value-container {
+    @apply c-text-base;
+  }
 
-    [data-reach-slider-range] {
-      @include fill-bg-color(accent);
+  &[data-disabled] {
+    .cobalt-slider__value-container {
+      @apply c-text-subdued;
     }
+  }
 
-    [data-reach-slider-handle] {
-      @include border(base);
-      width: spacing(md);
-      height: spacing(md);
-      box-sizing: content-box;
-
-      // The handle will always be white in any cases
-      background: #fff;
-      cursor: pointer;
+  [data-part="control"] {
+    @apply c-py-sm c-flex c-items-center;
+  }
 
-      box-shadow: elevation(base);
-      border-radius: 50%;
-    }
+  [data-part="track"] {
+    @apply c-bg-fill-subdued c-flex-1 c-rounded-full;
+    height: 3px;
 
-    [data-reach-slider-handle]:not([aria-disabled]):focus {
-      @include border(accent, 2);
-      outline: none;
-      box-shadow: elevation(base);
+    &[data-disabled] {
+      @apply c-bg-disabled;
     }
+  }
 
-    [data-reach-slider-track][data-disabled] {
-      @include bg-color(disabled);
-    }
+  [data-part="range"] {
+    @apply c-bg-accent c-rounded-full;
+    height: 3px;
 
-    [data-reach-slider-track-highlight][data-disabled] {
-      @include bg-color(disabled);
+    &[data-disabled] {
+      @apply c-bg-accentAlt;
     }
+  }
 
-    [data-reach-slider-handle][aria-disabled] {
-      @include bg-color(neutralAlt);
-    }
+  [data-part="thumb"] {
+    @apply c-border c-border-base c-shadow;
+    width: 1.5rem;
+    height: 1.5rem;
 
-    &__value-container {
-      @include text-color(base);
-      font-size: font-size(body);
-    }
+    // The handle will always be white in any cases
+    background: #fff;
+    cursor: pointer;
+    border-radius: 50%;
 
-    &__value-meta {
-      @include text-color(subdued);
+    &[data-disabled] {
+      @apply c-bg-neutralAlt;
+      cursor: not-allowed;
     }
 
-    &--disabled {
-      #{ $self }__value-container {
-        @include text-color(subdued);
-      }
+    &:not([data-disabled]):focus {
+      @apply c-border-accent c-border-2;
+      outline: none;
     }
   }
 }

package/styles/components/Form/TextInput.scss

@@ -36,6 +36,10 @@
         padding-left: 40px;
       }
 
+      #{ $self }__Input:focus {
+        padding-left: 39px;
+      }
+
       #{ $self }__Input + #{ $self }__Icon {
         @include semantic-color(icon, accent, fill);
         pointer-events: none;

package/styles/components/Form/field.scss

@@ -34,7 +34,7 @@ $formfield-maxwidth: 600px;
       max-width: $formfield-maxwidth;
     }
 
-    > .cobalt-FormField__Label {
+    .cobalt-FormField__Label {
       @include text-color(base);
       display: inline-block;
 
@@ -55,7 +55,7 @@ $formfield-maxwidth: 600px;
     & + .cobalt-FormField {
       margin-top: spacing(md);
 
-      > .cobalt-FormField__Label {
+      .cobalt-FormField__Label {
         margin-top: spacing(xs);
       }
     }

package/styles/components/Modal/index.scss

@@ -1,115 +1,134 @@
-@import "@reach/dialog/styles.css";
+.cobalt-modal {
+  --dialog-margin-top: 10vh;
 
-$reach-ui-dialog-margin-top: 10vh;
+  @apply c-p-none c-z-modal;
+  position: fixed;
+  left: 0;
+  top: var(--dialog-margin-top);
 
-.cobalt-modal {
   display: flex;
-  flex-direction: column;
-  padding: spacing(none);
+  justify-content: center;
 
-  &__overlay[data-reach-dialog-overlay] {
-    z-index: zx(modal);
+  width: 100%;
+
+  &__overlay {
+    @apply c-z-modal-below;
+    position: fixed;
 
     overflow: hidden;
 
-    background-color: fade-out(black, 0.2);
+    background-color: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(4px);
 
+    inset: 0;
     will-change: opacity;
-  }
-
-  &[data-reach-dialog-content] {
-    @include bg-color(secondary);
-    max-height: calc(100% - 2 * #{$reach-ui-dialog-margin-top});
-
-    box-shadow: 0 6px 36px fade-out(black, 0.8);
-  }
-
-  &[data-reach-dialog-content]:not(.cobalt-modal--mobile) {
-    max-width: 38rem;
-    width: 80vw;
-  }
 
-  &--fullHeight {
-    &[data-reach-dialog-content] {
-      height: 100%;
+    &[data-state="open"]:not(.cobalt-modal--skipAnimation__enter) {
+      animation: c-fade-in 300ms ease-out;
     }
-  }
 
-  &--fullWidth {
-    &[data-reach-dialog-content]:not(.cobalt-modal--mobile) {
-      max-width: unset;
+    &[data-state="closed"]:not(.cobalt-modal--skipAnimation__leave) {
+      animation: c-fade-out 200ms ease-in;
     }
   }
 
-  &--desktop {
-    position: relative;
-
-    border-radius: border-radius(xl);
-  }
+  .cobalt-modal__content {
+    @apply c-bg-secondary;
+    max-height: calc(100% - 2 * var(--dialog-margin-top));
+    width: 80vw;
 
-  &--mobile {
-    position: fixed;
+    box-shadow: 0 6px 36px fade-out(black, 0.8);
 
-    margin-bottom: spacing(none);
-    width: 100%;
+    @include breakpoint($from: "md") {
+      @apply c-rounded-xl;
+      max-width: 38rem;
+    }
 
-    &[data-reach-dialog-content] {
+    @include breakpoint($until: "md") {
+      position: fixed;
       bottom: 0;
 
-      max-height: calc(100% - #{spacing(xl)});
+      width: 100%;
+      max-height: calc(100% - theme("spacing.xl"));
 
       border-radius: 16px 16px 0 0;
     }
-  }
 
-  &--overflowHidden {
-    overflow: hidden;
+    &[data-state="open"]:not(.cobalt-modal--skipAnimation__enter) {
+      animation: c-slide-in-from-bottom 300ms ease-out;
+      @include breakpoint($from: "md") {
+        animation: c-slide-in 300ms ease-out;
+      }
+    }
+
+    &[data-state="closed"]:not(.cobalt-modal--skipAnimation__leave) {
+      animation: c-slide-out-to-bottom 200ms ease-in;
+      @include breakpoint($from: "md") {
+        animation: c-slide-out 200ms ease-in;
+      }
+    }
   }
 
-  &-body {
+  &--fullHeight {
     height: 100%;
 
-    overflow-y: auto;
-    overscroll-behavior: contain;
-
-    &--bodySpacing {
-      padding: spacing(lg) spacing(md);
+    .cobalt-modal__content {
+      height: 100%;
+    }
+  }
 
-      &.cobalt-modal-body--hasHeader {
-        padding-top: spacing(sm);
-      }
+  &--fullWidth {
+    .cobalt-modal__content {
+      max-width: unset;
+    }
+  }
 
-      &.cobalt-modal-body--hasFooter {
-        padding-bottom: spacing(sm);
-      }
+  &--overflowHidden {
+    .cobalt-modal__content {
+      overflow: hidden;
     }
   }
 
   &-footer {
-    @include border-top(base);
-    padding: spacing(sm);
+    @apply c-border-t c-border-t-base c-p-sm;
   }
 
   &-header {
-    @include border-bottom(base);
+    @apply c-border-b c-border-b-base c-p-md;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: spacing(md);
 
     &__title {
-      @include c-text-title-md;
-      @include text-color(base);
-      margin: spacing(none);
+      @apply c-text-title-md c-text-base c-m-none;
     }
 
     &__close-button {
+      @apply c-p-none c-cursor-pointer;
       flex: none;
       border: 0;
-      padding: spacing(none);
 
-      cursor: cursor(pointer);
       background-color: transparent;
     }
+
+    + .cobalt-modal-body__wrapper
+      .cobalt-modal-body.cobalt-modal-body--bodySpacing {
+      @apply c-pt-sm;
+    }
+  }
+
+  &-body {
+    height: 100%;
+
+    overflow-y: auto;
+    overscroll-behavior: contain;
+
+    &--bodySpacing {
+      @apply c-py-lg c-px-md;
+
+      &.cobalt-modal-body--hasFooter {
+        @apply c-pb-sm;
+      }
+    }
   }
 }

package/styles/components/PhotoDropzone/index.scss

@@ -102,6 +102,10 @@
   pointer-events: initial;
 }
 
+.cobalt-photo-dropzone__hidden-input {
+  @apply c-sr-only;
+}
+
 @keyframes pop {
   50% {
     transform: scale(1.1);

package/styles/components/Tabs/index.scss

@@ -1,114 +1,25 @@
-@import "@reach/tabs/styles.css";
-
-$scrollButtonWidth: 2rem;
-
 .cobalt-tabs {
-  @include bg-color(secondary);
+  @apply c-bg-secondary;
   position: relative;
 }
 
-.cobalt-tabs__nav-prev,
-.cobalt-tabs__nav-next {
-  position: absolute;
-  top: 0;
-
-  width: $scrollButtonWidth;
-  // Tab height
-  height: calc(1rem + #{spacing(md) * 2});
-  padding: 0;
-  border: 0;
-
-  cursor: pointer;
-  background: none;
-
-  .cobalt-tabs__nav-icon {
-    margin-left: 0;
-
-    transition: margin-left 0.2s;
-  }
-
-  &[disabled] {
-    opacity: 0.2;
-    cursor: not-allowed;
-
-    &:hover .cobalt-tabs__nav-icon,
-    &:focus .cobalt-tabs__nav-icon {
-      margin-left: 0;
-    }
-  }
-}
-
-.cobalt-tabs__nav-prev {
-  background: linear-gradient(
-    270deg,
-    transparent,
-    var(--c-background-secondary) 30%
-  );
-
-  &:hover .cobalt-tabs__nav-icon,
-  &:focus .cobalt-tabs__nav-icon {
-    margin-left: -0.4rem;
-  }
-}
-
-.cobalt-tabs__nav-next {
-  right: 0;
-
-  background: linear-gradient(
-    90deg,
-    transparent,
-    var(--c-background-secondary) 30%
-  );
-
-  &:hover .cobalt-tabs__nav-icon,
-  &:focus .cobalt-tabs__nav-icon {
-    margin-left: 0.4rem;
-  }
-}
-
 .cobalt-tabs__labels {
   position: relative;
 
+  display: flex;
   width: 100%;
+  overflow-y: auto;
 
   background: none;
-
-  &.cobalt-tabs__labels--scrollable {
-    padding: 0 $scrollButtonWidth;
-
-    overflow-x: scroll;
-    overflow-y: hidden;
-
-    // Hide horizontal scrolling bar
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    // trick to force a padding-right in the scrollable tab list
-    &:after {
-      right: 0;
-
-      min-width: 2rem;
-      max-width: 2rem;
-      display: block;
-
-      content: "";
-    }
-  }
 }
 
 .cobalt-tabs__label {
-  @include c-text-section-heading;
-  @include bg-color(secondaryInteractive);
+  @apply c-text-section-heading c-bg-secondaryInteractive;
   position: relative;
 
   display: flex;
-  flex: 1 0 auto;
   justify-content: center;
+  flex: 1 0 auto;
   align-items: center;
   padding: spacing(md);
   border: 0;
@@ -125,32 +36,19 @@ $scrollButtonWidth: 2rem;
 
   transition: 0.2s color;
 
-  &:after {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    display: block;
-    height: 3px;
-
-    content: "";
-
-    background: transparent;
-
-    transform: scaleX(0);
-    transition: transform ease-out 0.15s;
+  &[data-selected] {
+    @apply c-text-base;
   }
+}
 
-  &.cobalt-tabs__label--selected {
-    @include text-color(base);
-
-    &:after {
-      @include fill-bg-color(accent);
+.cobalt-tabs__indicator {
+  @apply c-bg-accent;
+  top: calc(100% - 3px);
 
-      transform: scaleX(1);
-    }
-  }
+  width: var(--width);
+  height: 3px;
+  --transition-duration: 0.15s;
+  --transition-timing-function: ease-in-out;
 }
 
 .cobalt-tabs__labels--subLevel {
@@ -158,9 +56,9 @@ $scrollButtonWidth: 2rem;
     flex: 0 0 auto;
 
     text-transform: none;
+  }
 
-    &:after {
-      background: transparent;
-    }
+  .cobalt-tabs__indicator {
+    @apply c-bg-transparent;
   }
 }

package/styles/core/z-index.scss

@@ -1,4 +1,5 @@
 $z-index-data: (
+  "autocomplete-popover": 2147483647,
   "below": -1,
   "base": 0,
   "above": 1,

package/tokens/zIndexes.js

@@ -28,7 +28,8 @@ var _zIndexes = {
 	"modal-above": 91,
 	"alert-below": 99,
 	alert: alert,
-	"alert-above": 101
+	"alert-above": 101,
+	"autocomplete-popover": 2147483647
 };
 
 export { above, alert, base, below, _zIndexes as default, dropdown, header, modal, nav, sidepanel };

package/tokens/zIndexes.js.map

@@ -1 +1 @@
-{"version":3,"file":"zIndexes.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"zIndexes.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/types/src/components/Accordion/index.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { AccordionProps as ReachAccordionProps, AccordionItemProps as ReachAccordionItemProps, AccordionButtonProps as ReachAccordionButtonProps, AccordionPanelProps as ReachAccordionPanelProps } from "@reach/accordion";
-export { useAccordionItemContext } from "@reach/accordion";
+import { AccordionItemProps as ArkAccordionItemProps, AccordionItemTriggerProps as ArkAccordionItemTriggerProps, AccordionRootProps as ArkAccordionRootProps, AccordionItemContentProps as ArkAccordionItemContentProps, AccordionValueChangeDetails } from "@ark-ui/react";
+export { useAccordionItemContext } from "@ark-ui/react";
 type HeadingLevelMapType = {
     h2: 2;
     h3: 3;
@@ -14,80 +14,29 @@ export type AccordionItemHeaderPropsType = {
      * To improve the semantics of the markup further, the ARIA guidelines dictate
      * that each accordion item's button should be wrapped in an element with
      * role="heading", or more simply, an HTML heading tag.
-     * https://reach.tech/accordion/#accordion-headings
      */
     headingLevel?: HeadingLevelMapType[HeadingTag];
     className?: string;
     leftToggleIcon?: boolean;
     useChevron?: boolean;
-} & ReachAccordionButtonProps;
-export type AccordionItemPanelPropsType = {
-    className?: string;
-} & ReachAccordionPanelProps;
-export type AccordionItemPropsType = {
-    className?: string;
-} & ReachAccordionItemProps;
-export type AccordionPropsType = {
-    className?: string;
-    collapsible?: ReachAccordionProps["collapsible"];
-    defaultIndex?: ReachAccordionProps["defaultIndex"];
-    index?: ReachAccordionProps["index"];
-    multiple?: ReachAccordionProps["multiple"];
-    onChange?: ReachAccordionProps["onChange"];
-} & ReachAccordionProps;
-export declare const AccordionItemHeader: React.ForwardRefExoticComponent<{
-    /**
-     * To improve the semantics of the markup further, the ARIA guidelines dictate
-     * that each accordion item's button should be wrapped in an element with
-     * role="heading", or more simply, an HTML heading tag.
-     * https://reach.tech/accordion/#accordion-headings
-     */
-    headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
-    className?: string | undefined;
-    leftToggleIcon?: boolean | undefined;
-    useChevron?: boolean | undefined;
-} & ReachAccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const AccordionItemPanel: {
-    ({ children, className, ...props }: AccordionItemPanelPropsType): React.JSX.Element;
-    displayName: string;
+} & ArkAccordionItemTriggerProps;
+export type AccordionItemPanelPropsType = ArkAccordionItemContentProps;
+export type AccordionItemPropsType = Omit<ArkAccordionItemProps, "value"> & {
+    value?: ArkAccordionItemProps["value"];
 };
-export declare const AccordionItem: {
-    ({ children, className, ...props }: AccordionItemPropsType): React.JSX.Element;
-    displayName: string;
-    Header: React.ForwardRefExoticComponent<{
-        /**
-         * To improve the semantics of the markup further, the ARIA guidelines dictate
-         * that each accordion item's button should be wrapped in an element with
-         * role="heading", or more simply, an HTML heading tag.
-         * https://reach.tech/accordion/#accordion-headings
-         */
-        headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
-        className?: string | undefined;
-        leftToggleIcon?: boolean | undefined;
-        useChevron?: boolean | undefined;
-    } & ReachAccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
-    Panel: {
-        ({ children, className, ...props }: AccordionItemPanelPropsType): React.JSX.Element;
-        displayName: string;
-    };
+export type AccordionPropsType = Omit<ArkAccordionRootProps, "onValueChange"> & {
+    onValueChange?: (value: AccordionValueChangeDetails["value"]) => void;
 };
 declare const Accordion: {
-    ({ className, children, index, collapsible, multiple, ...props }: AccordionPropsType): React.JSX.Element;
+    ({ className, children, collapsible, onValueChange, ...props }: AccordionPropsType): React.JSX.Element;
+    displayName: string;
     Item: {
-        ({ children, className, ...props }: AccordionItemPropsType): React.JSX.Element;
+        ({ children, className, value, ...props }: AccordionItemPropsType): React.JSX.Element;
         displayName: string;
-        Header: React.ForwardRefExoticComponent<{
-            /**
-             * To improve the semantics of the markup further, the ARIA guidelines dictate
-             * that each accordion item's button should be wrapped in an element with
-             * role="heading", or more simply, an HTML heading tag.
-             * https://reach.tech/accordion/#accordion-headings
-             */
-            headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
-            className?: string | undefined;
-            leftToggleIcon?: boolean | undefined;
-            useChevron?: boolean | undefined;
-        } & ReachAccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
+        Header: {
+            ({ children, className, headingLevel, leftToggleIcon, useChevron, ...props }: AccordionItemHeaderPropsType): React.JSX.Element;
+            displayName: string;
+        };
         Panel: {
             ({ children, className, ...props }: AccordionItemPanelPropsType): React.JSX.Element;
             displayName: string;