@loomhq/lens 10.101.4 → 10.102.1

package/dist/components/tabs/tabs.d.ts

@@ -1,17 +1,19 @@
 import React from 'react';
 declare const TabWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TabWrapperProps, object>;
 export declare const Tab: ({ children, isActive, htmlTag, icon, ...props }: TabProps & React.ComponentProps<typeof TabWrapper>) => JSX.Element;
-declare const Tabs: ({ children, scrollOffset, hasFullTabs, ...props }: TabsProps) => JSX.Element;
+declare const Tabs: ({ children, scrollOffset, hasFullTabs, isPilledDesign, ...props }: TabsProps) => JSX.Element;
 type TabsProps = {
     scrollOffset?: number | string;
     hasFullTabs?: boolean;
     children?: React.ReactNode;
+    isPilledDesign?: boolean;
 };
 type TabProps = {
     isActive?: boolean;
     icon?: React.ReactNode;
     children?: React.ReactNode;
     htmlTag?: 'a' | 'button' | 'span';
+    isPilledDesign?: boolean;
 };
 type TabWrapperProps = {
     isActive?: boolean;

package/dist/components/tabs/tabs.js

@@ -14,6 +14,7 @@ import Container from '../container/container';
 import Icon from '../icon/icon';
 import React from 'react';
 import styled from '@emotion/styled';
+const TabsContext = React.createContext({});
 const negativeScrollOffset = scrollOffset => `calc(-1 * ${getSizeValue(scrollOffset)})`;
 const Wrapper = styled.div `
   ${props => props.scrollOffset &&
@@ -27,6 +28,7 @@ const TabsNav = styled.nav `
   overflow: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;
+
   ${props => props.scrollOffset && getSize('padding-left', props.scrollOffset)};
 
   &::-webkit-scrollbar {
@@ -47,6 +49,36 @@ const TabsNav = styled.nav `
     ${props => props.scrollOffset && getSize('width', props.scrollOffset)};
   }
 `;
+const TabsNavPilled = styled.nav `
+  ${getRadius('full')};
+  background-color: var(--lns-color-backgroundSecondary);
+
+  padding: var(--lns-space-xsmall);
+
+  display: flex;
+  overflow: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  ${props => props.scrollOffset && getSize('padding-left', props.scrollOffset)};
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  & > * {
+    flex: 1 0;
+  }
+
+  & > * + * {
+    margin-left: ${u(2)};
+  }
+
+  &:after {
+    content: '';
+    flex-shrink: 0;
+    ${props => props.scrollOffset && getSize('width', props.scrollOffset)};
+  }
+`;
 const TabWrapper = styled.button `
   appearance: none;
   font: inherit;
@@ -95,19 +127,66 @@ const TabWrapper = styled.button `
     ${props => props.isActive && `background-color: ${getColorValue('primary')}`};
   }
 `;
+const TabWrapperPilled = styled.button `
+  padding: ${u(1)} 0;
+
+  appearance: none;
+  font: inherit;
+  background: transparent;
+  border: none;
+  ${getRadius('full')};
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  position: relative;
+  color: inherit;
+  text-decoration: none;
+  flex-shrink: 0;
+  ${getFontWeight('bold')};
+
+  transition: 0.6s color;
+  white-space: nowrap;
+  ${props => props.isActive &&
+    `background-color: ${getColorValue('background')};
+    color: ${getColorValue('primary')};
+  `};
+
+  &:focus,
+  &:focus-visible {
+    outline: 1px solid transparent;
+  }
+
+  &:focus-visible {
+    ${getFocusRing(undefined, 'inset')};
+  }
+
+  &:hover {
+    color: ${getColorValue('primary')};
+    transition: 0.3s color;
+  }
+`;
 export const Tab = (_a) => {
     var { children, isActive, htmlTag = 'button', icon } = _a, props = __rest(_a, ["children", "isActive", "htmlTag", "icon"]);
+    const { isPilledDesign } = React.useContext(TabsContext);
+    if (isPilledDesign) {
+        return (React.createElement(TabWrapperPilled, Object.assign({ as: htmlTag, isActive: isActive, icon: icon }, props),
+            icon && (React.createElement(Container, { htmlTag: "span", paddingRight: children && 'small' },
+                React.createElement(Icon, { icon: icon, color: "currentColor", hasWidthOffset: true }))),
+            children));
+    }
     return (React.createElement(TabWrapper, Object.assign({ as: htmlTag, isActive: isActive, icon: icon }, props),
         icon && (React.createElement(Container, { htmlTag: "span", paddingRight: children && 'small' },
             React.createElement(Icon, { icon: icon, color: "currentColor", hasWidthOffset: true }))),
         children));
 };
 const Tabs = (_a) => {
-    var { children, scrollOffset, hasFullTabs } = _a, props = __rest(_a, ["children", "scrollOffset", "hasFullTabs"]);
-    const tabsContent = (React.createElement(TabsNav, Object.assign({ hasFullTabs: hasFullTabs, scrollOffset: scrollOffset }, props), children));
+    var { children, scrollOffset, hasFullTabs, isPilledDesign } = _a, props = __rest(_a, ["children", "scrollOffset", "hasFullTabs", "isPilledDesign"]);
+    const tabsContent = isPilledDesign ? (React.createElement(TabsNavPilled, Object.assign({ hasFullTabs: hasFullTabs, scrollOffset: scrollOffset }, props), children)) : (React.createElement(TabsNav, Object.assign({ hasFullTabs: hasFullTabs, scrollOffset: scrollOffset }, props), children));
     if (scrollOffset) {
         return React.createElement(Wrapper, { scrollOffset: scrollOffset }, tabsContent);
     }
-    return tabsContent;
+    return (React.createElement(TabsContext.Provider, { value: { isPilledDesign } }, tabsContent));
 };
 export default Tabs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.101.4",
+  "version": "10.102.1",
   "scripts": {
     "dev": "next",
     "build:next": "next build",