@sproutsocial/seeds-react-accordion 0.4.32 → 0.4.46

package/src/styles.ts

@@ -1,164 +0,0 @@
-import styled, { css } from "styled-components";
-import * as RadixAccordion from "@radix-ui/react-accordion";
-import {
-  BORDER,
-  COMMON,
-  FLEXBOX,
-  LAYOUT,
-  TYPOGRAPHY,
-} from "@sproutsocial/seeds-react-system-props";
-import { type TypeAccordionSystemProps } from "./AccordionTypes";
-
-interface StyledAccordionProps extends TypeAccordionSystemProps {
-  $styled?: boolean;
-}
-
-export const StyledAccordionItem = styled(RadixAccordion.Item)``;
-
-const animations = css`
-  @keyframes slideDown {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-
-  @keyframes slideUp {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-`;
-
-export const StyledRadixAccordionContent = styled(
-  RadixAccordion.Content
-)<StyledAccordionProps>`
-  ${animations}
-
-  overflow: hidden;
-
-  &[data-state="open"] {
-    animation: slideDown 300ms ease-in-out;
-  }
-
-  &[data-state="closed"] {
-    animation: slideUp 300ms ease-in-out;
-  }
-
-  &[data-styled="true"] {
-    border-left: ${({ theme }) =>
-      `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
-    border-right: ${({ theme }) =>
-      `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
-    background: ${({ theme }) => theme.colors.container.background.base};
-  }
-
-  .accordion-item:last-child[data-state="open"] &[data-styled="true"],
-  .accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
-    border-bottom: ${({ theme }) =>
-      `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
-    border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
-    border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
-  }
-`;
-
-export const ContentContainer = styled.div<StyledAccordionProps>`
-  color: ${({ theme }) => theme.colors.text.body};
-  background: transparent;
-  font-family: ${({ theme }) => theme.fontFamily};
-
-  &[data-styled="true"] {
-    padding: ${({ theme }) => theme.space[400]};
-    ${({ theme }) => theme.typography[200]};
-  }
-
-  .accordion-item:last-child[data-state="open"] &[data-styled="true"],
-  .accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
-    border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
-    border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
-  }
-
-  ${COMMON}
-  ${TYPOGRAPHY}
-  ${BORDER}
-	${LAYOUT}
-	${FLEXBOX}
-`;
-
-export const TriggerContainer = styled.div<StyledAccordionProps>`
-  display: flex;
-  align-items: center;
-  color: ${({ theme }) => theme.colors.text.body};
-  ${({ theme }) => theme.typography[200]};
-
-  /* Override Text.Headline styles to match original accordion trigger typography */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: normal;
-    line-height: inherit;
-    color: inherit;
-  }
-
-  &[data-styled="true"] {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-weight: ${({ theme }) => theme.fontWeights.semibold};
-      color: ${({ theme }) => theme.colors.text.headline};
-    }
-  }
-
-  ${({ $styled, theme }) =>
-    $styled &&
-    `
-    border-top: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};
-    border-left: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};
-    border-right: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};
-    background: ${theme.colors.container.background.base};
-  `}
-
-  .accordion-item[data-state="open"] &[data-styled="true"] {
-    border-bottom: ${({ theme }) =>
-      `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
-  }
-
-  .accordion-item[data-state="closed"] &[data-styled="true"] {
-    transition: border-bottom-color 0s ease-in-out 0.3s;
-    border-bottom: ${({ theme }) =>
-      `${theme.borderWidths[500]} solid transparent`};
-  }
-
-  .accordion-item:first-child &[data-styled="true"] {
-    border-top-left-radius: ${({ theme }) => theme.radii.outer};
-    border-top-right-radius: ${({ theme }) => theme.radii.outer};
-  }
-
-  .accordion-item:last-child &[data-styled="true"] {
-    border-bottom: ${({ theme }) =>
-      `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
-  }
-
-  .accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
-    transition: border-radius 0s linear 0.3s;
-    border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
-    border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
-  }
-
-  ${COMMON}
-  ${BORDER}
-	${LAYOUT}
-	${FLEXBOX}
-`;

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "module": "esnext"
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist", "coverage"]
-}

package/tsup.config.ts

@@ -1,12 +0,0 @@
-import { defineConfig } from "tsup";
-
-export default defineConfig((options) => ({
-  entry: ["src/index.ts"],
-  format: ["cjs", "esm"],
-  clean: true,
-  legacyOutput: true,
-  dts: options.dts,
-  external: ["react"],
-  sourcemap: true,
-  metafile: options.metafile,
-}));