@sproutsocial/seeds-react-tabs 1.0.0

package/src/styles.ts

@@ -0,0 +1,80 @@
+import styled, { css } from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { type TypeTabsProps } from "./TabsTypes";
+
+interface TypeTabState {
+  isSelected: boolean;
+}
+type TypeFullWidth = Pick<TypeTabsProps, "fullWidth">;
+interface TypeStyleProps extends TypeFullWidth, TypeTabState {}
+
+const Container = styled.ul<TypeTabsProps>`
+  display: ${(props) => (props.fullWidth ? "flex" : "inline-flex")};
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-bottom: ${(props) => props.theme.borders[500]}
+    ${(props) => props.theme.colors.container.border.base};
+
+  ${COMMON}
+`;
+
+export const TabItem = styled.li<TypeStyleProps>`
+  margin-bottom: -1px;
+  ${(props) =>
+    props.fullWidth &&
+    css`
+      flex-grow: 1;
+    `};
+
+  &:not(:last-child) {
+    ${(props) =>
+      !props.fullWidth &&
+      css`
+        margin-right: ${(props) => props.theme.space[350]};
+      `};
+  }
+
+  ${(props) =>
+    props.isSelected &&
+    css`
+      box-shadow: ${(props) =>
+        `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.base}`};
+    `};
+
+  &:hover {
+    ${(props) =>
+      props.isSelected &&
+      css`
+        box-shadow: ${(props) =>
+          `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.hover}`};
+      `};
+  }
+`;
+
+export const TabButton = styled(Button)<TypeStyleProps>`
+  padding: ${(props) => `${props.theme.space[350]} 0`};
+  color: ${(props) => props.theme.colors.text.headline};
+  width: 100%;
+
+  ${(props) =>
+    props.isSelected &&
+    css`
+      color: ${(props) => props.theme.colors.link.base};
+    `};
+
+  &:hover {
+    ${(props) =>
+      props.isSelected &&
+      css`
+        color: ${(props) => props.theme.colors.link.hover};
+      `};
+  }
+
+  &:active {
+    transform: none;
+  }
+`;
+export default Container;

package/tsconfig.json

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

package/tsup.config.ts

@@ -0,0 +1,12 @@
+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,
+}));