@sproutsocial/seeds-react-tree 0.4.1 → 0.4.3

package/src/TreeStyles.tsx

@@ -1,115 +0,0 @@
-import styled, { css } from "styled-components";
-
-export const TreeRoot = styled.ul`
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  font-family: ${({ theme }) => theme.fontFamily};
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  line-height: ${({ theme }) => theme.typography[200].lineHeight};
-  color: ${({ theme }) => theme.colors.text.body};
-`;
-
-export const TreeItemRow = styled.div<{
-  $level: number;
-  $selected: boolean;
-  $disabled: boolean;
-}>`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.space[300]};
-  padding: ${({ theme }) => theme.space[300]};
-  padding-left: ${({ theme, $level }) =>
-    `calc(${theme.space[300]} + ${$level - 1} * ${theme.space[400]})`};
-  border-radius: ${({ theme }) => theme.radii[400]};
-  cursor: pointer;
-  user-select: none;
-  background: transparent;
-  transition: background-color ${({ theme }) => theme.duration.fast}
-    ${({ theme }) => theme.easing.ease_in};
-
-  &:hover {
-    background: ${({ theme }) => theme.colors.listItem.background.hover};
-  }
-
-  ${({ $selected, theme }) =>
-    $selected &&
-    css`
-      background: ${theme.colors.listItem.background.hover};
-      font-weight: ${theme.fontWeights.semibold};
-    `}
-
-  ${({ $disabled }) =>
-    $disabled &&
-    css`
-      opacity: 0.4;
-      cursor: not-allowed;
-      pointer-events: none;
-    `}
-`;
-
-export const TreeItemEl = styled.li`
-  list-style: none;
-  outline: none;
-
-  /*
-   * Tree rows stack tightly, so the standard outset Seeds focusRing bleeds
-   * into adjacent rows. Use an inset outline so the ring is drawn just inside
-   * the row's edge and never overlaps siblings or children.
-   *
-   * The same ring is drawn when [data-treeitem-active] is set so combobox
-   * hosts that drive the tree via aria-activedescendant (no real DOM focus)
-   * still get a visible "active" indicator on the row.
-   */
-  &:focus-visible > ${TreeItemRow}, &[data-treeitem-active] > ${TreeItemRow} {
-    outline: 2px solid
-      ${({ theme }) => theme.colors.button.primary.background.base};
-    outline-offset: -2px;
-  }
-`;
-
-export const TreeItemGroup = styled.ul`
-  list-style: none;
-  margin: 0;
-  padding: 0;
-`;
-
-export const TreeItemLabel = styled.span`
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-export const TreeItemIcon = styled.span`
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-`;
-
-export const TreeItemChevron = styled.button.attrs({
-  type: "button",
-  tabIndex: -1,
-})<{ $expanded: boolean }>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: ${({ theme }) => theme.space[500]};
-  height: ${({ theme }) => theme.space[500]};
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: ${({ theme }) => theme.colors.icon.base};
-  cursor: pointer;
-  border-radius: ${({ theme }) => theme.radii[300]};
-  transition: transform ${({ theme }) => theme.duration.fast}
-    ${({ theme }) => theme.easing.ease_in};
-  transform: ${({ $expanded }) =>
-    $expanded ? "rotate(0deg)" : "rotate(-90deg)"};
-
-  &:hover {
-    background: ${({ theme }) => theme.colors.listItem.background.hover};
-  }
-`;