@loomhq/lens 11.30.4 → 11.32.0

package/dist/cjs/index.js

@@ -185,6 +185,7 @@ __export(src_exports, {
   getCssVarsFromObject: () => getCssVarsFromObject,
   getFocusRing: () => getFocusRing,
   getFontWeight: () => getFontWeight,
+  getListContainer: () => getListContainer,
   getMediaCss: () => getMediaCss,
   getPlacement: () => getPlacement,
   getRadius: () => getRadius,
@@ -596,6 +597,15 @@ var getFocusRing = (color, position) => {
   const focusColor = color ? color : getColorValue("focusRing");
   return `box-shadow:${position ? position : ""} 0 0 0 2px ${focusColor};`;
 };
+var getListContainer = (tag) => {
+  if (tag === "ol" || tag === "ul") {
+    return `
+      list-style-type: none;
+      margin: 0;
+      padding: 0
+      `;
+  }
+};
 var getPlacement = (maxHeight, placement) => {
   const placementStyles = {
     center: {
@@ -2568,6 +2578,7 @@ var ArrangeWrapper = import_styled10.default.div`
 
   ${(props) => props.autoFlow && getResponsiveOneOf("grid-auto-flow", props.autoFlow)};
   ${(props) => props.columns && props.autoFlow && getResponsiveOneOf("grid-auto-flow", props.autoFlow)};
+  ${(props) => getListContainer(props.as)};
 `;
 var Arrange = (_a) => {
   var _b = _a, {
@@ -2586,6 +2597,7 @@ var Arrange = (_a) => {
     justifyItems,
     alignContent,
     autoFlow,
+    htmlTag = "div",
     className,
     style
   } = _b, props = __objRest(_b, [
@@ -2604,6 +2616,7 @@ var Arrange = (_a) => {
     "justifyItems",
     "alignContent",
     "autoFlow",
+    "htmlTag",
     "className",
     "style"
   ]);
@@ -2614,6 +2627,7 @@ var Arrange = (_a) => {
     ArrangeWrapper,
     __spreadValues({
       alignItems,
+      as: htmlTag,
       justifyContent,
       justifyItems,
       alignContent,
@@ -5565,6 +5579,8 @@ var TabsNav = import_styled34.default.nav`
   -ms-overflow-style: none;
   scrollbar-width: none;
 
+  ${(props) => props.hasBottomBorder && "border-bottom: 1px solid var(--lns-color-border)"}
+
   ${(props) => props.scrollOffset && getSize("padding-left", props.scrollOffset)};
 
   &::-webkit-scrollbar {
@@ -5619,7 +5635,7 @@ var TabWrapper = import_styled34.default.button`
   appearance: none;
   font: inherit;
   background: transparent;
-  border: none;
+  border: 0;
   ${getRadius("medium")};
   cursor: pointer;
   display: inline-flex;
@@ -5724,12 +5740,14 @@ var Tabs = (_a) => {
     children,
     scrollOffset,
     hasFullTabs,
-    isPilledDesign
+    isPilledDesign,
+    hasBottomBorder = false
   } = _b, props = __objRest(_b, [
     "children",
     "scrollOffset",
     "hasFullTabs",
-    "isPilledDesign"
+    "isPilledDesign",
+    "hasBottomBorder"
   ]);
   const tabsContent = isPilledDesign ? /* @__PURE__ */ import_react41.default.createElement(
     TabsNavPilled,
@@ -5738,7 +5756,15 @@ var Tabs = (_a) => {
       scrollOffset
     }, props),
     children
-  ) : /* @__PURE__ */ import_react41.default.createElement(TabsNav, __spreadValues({ hasFullTabs, scrollOffset }, props), children);
+  ) : /* @__PURE__ */ import_react41.default.createElement(
+    TabsNav,
+    __spreadValues({
+      hasFullTabs,
+      scrollOffset,
+      hasBottomBorder
+    }, props),
+    children
+  );
   if (scrollOffset) {
     return /* @__PURE__ */ import_react41.default.createElement(Wrapper, { scrollOffset }, tabsContent);
   }
@@ -5962,6 +5988,7 @@ var SplitWrapper = import_styled38.default.div`
   ${(props) => props.rowGap && getSize("row-gap", props.rowGap)};
   ${(props) => props.columnGap && getSize("column-gap", props.columnGap)};
   ${(props) => getSizeStyles(props)};
+  ${(props) => getListContainer(props.as)};
 `;
 var SplitSectionWrapper = import_styled38.default.div`
   ${(props) => getResponsiveNumber("flex-grow", props.grow)};
@@ -5981,6 +6008,7 @@ var SplitSection = (_a) => {
     minHeight,
     maxWidth,
     maxHeight,
+    htmlTag = "div",
     className,
     style
   } = _b, props = __objRest(_b, [
@@ -5994,6 +6022,7 @@ var SplitSection = (_a) => {
     "minHeight",
     "maxWidth",
     "maxHeight",
+    "htmlTag",
     "className",
     "style"
   ]);
@@ -6003,6 +6032,7 @@ var SplitSection = (_a) => {
   return /* @__PURE__ */ import_react45.default.createElement(
     SplitSectionWrapper,
     __spreadValues({
+      as: htmlTag,
       grow,
       shrink,
       basis,
@@ -6032,6 +6062,7 @@ var Split = (_a) => {
     minHeight,
     maxWidth,
     maxHeight,
+    htmlTag = "div",
     className,
     style
   } = _b, props = __objRest(_b, [
@@ -6049,6 +6080,7 @@ var Split = (_a) => {
     "minHeight",
     "maxWidth",
     "maxHeight",
+    "htmlTag",
     "className",
     "style"
   ]);
@@ -6058,6 +6090,7 @@ var Split = (_a) => {
   return /* @__PURE__ */ import_react45.default.createElement(
     SplitWrapper,
     __spreadValues({
+      as: htmlTag,
       gap,
       rowGap,
       columnGap,
@@ -6072,7 +6105,12 @@ var Split = (_a) => {
       maxWidth,
       maxHeight
     }, props),
-    children
+    htmlTag === "ul" || htmlTag === "ol" ? import_react45.Children.map(children, (child) => {
+      if (child.type === SplitSection || child.type === Split) {
+        return (0, import_react45.cloneElement)(child, { htmlTag: "li" });
+      }
+      return child;
+    }) : children
   );
 };
 var split_default = Split;

package/dist/esm/index.js

@@ -377,6 +377,15 @@ var getFocusRing = (color, position) => {
   const focusColor = color ? color : getColorValue("focusRing");
   return `box-shadow:${position ? position : ""} 0 0 0 2px ${focusColor};`;
 };
+var getListContainer = (tag) => {
+  if (tag === "ol" || tag === "ul") {
+    return `
+      list-style-type: none;
+      margin: 0;
+      padding: 0
+      `;
+  }
+};
 var getPlacement = (maxHeight, placement) => {
   const placementStyles = {
     center: {
@@ -2349,6 +2358,7 @@ var ArrangeWrapper = styled10.div`
 
   ${(props) => props.autoFlow && getResponsiveOneOf("grid-auto-flow", props.autoFlow)};
   ${(props) => props.columns && props.autoFlow && getResponsiveOneOf("grid-auto-flow", props.autoFlow)};
+  ${(props) => getListContainer(props.as)};
 `;
 var Arrange = (_a) => {
   var _b = _a, {
@@ -2367,6 +2377,7 @@ var Arrange = (_a) => {
     justifyItems,
     alignContent,
     autoFlow,
+    htmlTag = "div",
     className,
     style
   } = _b, props = __objRest(_b, [
@@ -2385,6 +2396,7 @@ var Arrange = (_a) => {
     "justifyItems",
     "alignContent",
     "autoFlow",
+    "htmlTag",
     "className",
     "style"
   ]);
@@ -2395,6 +2407,7 @@ var Arrange = (_a) => {
     ArrangeWrapper,
     __spreadValues({
       alignItems,
+      as: htmlTag,
       justifyContent,
       justifyItems,
       alignContent,
@@ -5346,6 +5359,8 @@ var TabsNav = styled34.nav`
   -ms-overflow-style: none;
   scrollbar-width: none;
 
+  ${(props) => props.hasBottomBorder && "border-bottom: 1px solid var(--lns-color-border)"}
+
   ${(props) => props.scrollOffset && getSize("padding-left", props.scrollOffset)};
 
   &::-webkit-scrollbar {
@@ -5400,7 +5415,7 @@ var TabWrapper = styled34.button`
   appearance: none;
   font: inherit;
   background: transparent;
-  border: none;
+  border: 0;
   ${getRadius("medium")};
   cursor: pointer;
   display: inline-flex;
@@ -5505,12 +5520,14 @@ var Tabs = (_a) => {
     children,
     scrollOffset,
     hasFullTabs,
-    isPilledDesign
+    isPilledDesign,
+    hasBottomBorder = false
   } = _b, props = __objRest(_b, [
     "children",
     "scrollOffset",
     "hasFullTabs",
-    "isPilledDesign"
+    "isPilledDesign",
+    "hasBottomBorder"
   ]);
   const tabsContent = isPilledDesign ? /* @__PURE__ */ React43.createElement(
     TabsNavPilled,
@@ -5519,7 +5536,15 @@ var Tabs = (_a) => {
       scrollOffset
     }, props),
     children
-  ) : /* @__PURE__ */ React43.createElement(TabsNav, __spreadValues({ hasFullTabs, scrollOffset }, props), children);
+  ) : /* @__PURE__ */ React43.createElement(
+    TabsNav,
+    __spreadValues({
+      hasFullTabs,
+      scrollOffset,
+      hasBottomBorder
+    }, props),
+    children
+  );
   if (scrollOffset) {
     return /* @__PURE__ */ React43.createElement(Wrapper, { scrollOffset }, tabsContent);
   }
@@ -5728,7 +5753,7 @@ var Illustration = (_a) => {
 var illustration_default = Illustration;
 
 // src/components/split/split.tsx
-import React47 from "react";
+import React47, { Children, cloneElement } from "react";
 import { css as css5 } from "@emotion/core";
 import styled38 from "@emotion/styled";
 var getSizeStyles = (props) => css5`
@@ -5750,6 +5775,7 @@ var SplitWrapper = styled38.div`
   ${(props) => props.rowGap && getSize("row-gap", props.rowGap)};
   ${(props) => props.columnGap && getSize("column-gap", props.columnGap)};
   ${(props) => getSizeStyles(props)};
+  ${(props) => getListContainer(props.as)};
 `;
 var SplitSectionWrapper = styled38.div`
   ${(props) => getResponsiveNumber("flex-grow", props.grow)};
@@ -5769,6 +5795,7 @@ var SplitSection = (_a) => {
     minHeight,
     maxWidth,
     maxHeight,
+    htmlTag = "div",
     className,
     style
   } = _b, props = __objRest(_b, [
@@ -5782,6 +5809,7 @@ var SplitSection = (_a) => {
     "minHeight",
     "maxWidth",
     "maxHeight",
+    "htmlTag",
     "className",
     "style"
   ]);
@@ -5791,6 +5819,7 @@ var SplitSection = (_a) => {
   return /* @__PURE__ */ React47.createElement(
     SplitSectionWrapper,
     __spreadValues({
+      as: htmlTag,
       grow,
       shrink,
       basis,
@@ -5820,6 +5849,7 @@ var Split = (_a) => {
     minHeight,
     maxWidth,
     maxHeight,
+    htmlTag = "div",
     className,
     style
   } = _b, props = __objRest(_b, [
@@ -5837,6 +5867,7 @@ var Split = (_a) => {
     "minHeight",
     "maxWidth",
     "maxHeight",
+    "htmlTag",
     "className",
     "style"
   ]);
@@ -5846,6 +5877,7 @@ var Split = (_a) => {
   return /* @__PURE__ */ React47.createElement(
     SplitWrapper,
     __spreadValues({
+      as: htmlTag,
       gap,
       rowGap,
       columnGap,
@@ -5860,7 +5892,12 @@ var Split = (_a) => {
       maxWidth,
       maxHeight
     }, props),
-    children
+    htmlTag === "ul" || htmlTag === "ol" ? Children.map(children, (child) => {
+      if (child.type === SplitSection || child.type === Split) {
+        return cloneElement(child, { htmlTag: "li" });
+      }
+      return child;
+    }) : children
   );
 };
 var split_default = Split;
@@ -7547,6 +7584,7 @@ export {
   getCssVarsFromObject,
   getFocusRing,
   getFontWeight,
+  getListContainer,
   getMediaCss,
   getPlacement,
   getRadius,

package/dist/types/components/arrange/arrange.d.ts

@@ -1,7 +1,8 @@
 import { LensDivProps, ResponsiveGridSections, ResponsiveType } from '../../types';
 import React from 'react';
-declare const ArrangeWrapper: import("@emotion/styled").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ArrangeProps, object>;
-type ArrangeProps = {
+declare const ArrangeWrapper: import("@emotion/styled").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ArrangeWrapperProps, object>;
+declare const Arrange: ({ children, width, height, minWidth, minHeight, maxWidth, maxHeight, gap, columns, rows, alignItems, justifyContent, justifyItems, alignContent, autoFlow, htmlTag, className, style, ...props }: ArrangeProps & React.ComponentProps<typeof ArrangeWrapper> & Omit<LensDivProps, keyof ArrangeProps & React.ComponentProps<typeof ArrangeWrapper>>) => React.JSX.Element;
+interface SharedProps {
     children?: React.ReactNode;
     width?: ResponsiveType<string | number>;
     height?: ResponsiveType<string | number>;
@@ -17,6 +18,11 @@ type ArrangeProps = {
     autoFlow?: ResponsiveType<'column' | 'row'>;
     columns?: ResponsiveGridSections;
     rows?: ResponsiveGridSections;
-};
-declare const Arrange: ({ children, width, height, minWidth, minHeight, maxWidth, maxHeight, gap, columns, rows, alignItems, justifyContent, justifyItems, alignContent, autoFlow, className, style, ...props }: ArrangeProps & React.ComponentProps<typeof ArrangeWrapper> & Omit<LensDivProps, keyof ArrangeProps & React.ComponentProps<typeof ArrangeWrapper>>) => React.JSX.Element;
+}
+interface ArrangeProps extends SharedProps {
+    htmlTag?: 'div' | 'ul' | 'ol' | 'li';
+}
+interface ArrangeWrapperProps extends SharedProps {
+    as?: string;
+}
 export default Arrange;

package/dist/types/components/split/split.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ResponsiveType } from '../../types';
-declare const SplitWrapper: import("@emotion/styled").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SplitProps, object>;
-declare const SplitSectionWrapper: import("@emotion/styled").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SplitSectionProps, object>;
-export declare const SplitSection: ({ children, grow, shrink, basis, width, height, minWidth, minHeight, maxWidth, maxHeight, className, style, ...props }: SplitSectionProps & React.ComponentProps<typeof SplitSectionWrapper>) => React.JSX.Element;
-declare const Split: ({ children, gap, rowGap, columnGap, alignItems, justifyContent, alignContent, wrap, width, height, minWidth, minHeight, maxWidth, maxHeight, className, style, ...props }: SplitProps & React.ComponentProps<typeof SplitWrapper>) => React.JSX.Element;
+declare const SplitWrapper: import("@emotion/styled").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SplitWrapperProps, object>;
+declare const SplitSectionWrapper: import("@emotion/styled").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SplitSectionWrapperProps, object>;
+export declare const SplitSection: ({ children, grow, shrink, basis, width, height, minWidth, minHeight, maxWidth, maxHeight, htmlTag, className, style, ...props }: SplitSectionProps & React.ComponentProps<typeof SplitSectionWrapper>) => React.JSX.Element;
+declare const Split: ({ children, gap, rowGap, columnGap, alignItems, justifyContent, alignContent, wrap, width, height, minWidth, minHeight, maxWidth, maxHeight, htmlTag, className, style, ...props }: SplitProps & React.ComponentProps<typeof SplitWrapper>) => React.JSX.Element;
 interface SharedProps {
     width?: ResponsiveType<number | string>;
     height?: ResponsiveType<number | string>;
@@ -18,6 +18,7 @@ interface SplitProps extends SharedProps {
     justifyContent?: ResponsiveType<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>;
     alignContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'start' | 'end' | 'baseline';
     wrap?: ResponsiveType<'nowrap' | 'wrap' | 'wrap-reverse'>;
+    htmlTag?: 'div' | 'ul' | 'ol' | 'li';
     gap?: ResponsiveType<number | string>;
     rowGap?: ResponsiveType<number | string>;
     columnGap?: ResponsiveType<number | string>;
@@ -25,11 +26,18 @@ interface SplitProps extends SharedProps {
     className?: never;
     style?: never;
 }
+interface SplitWrapperProps extends SplitProps {
+    as?: string;
+}
 interface SplitSectionProps extends SharedProps {
     grow?: ResponsiveType<number | string>;
     shrink?: ResponsiveType<number | string>;
     basis?: ResponsiveType<number | string>;
     className?: never;
     style?: never;
+    htmlTag?: 'div' | 'li';
+}
+interface SplitSectionWrapperProps extends SplitSectionProps {
+    as?: string;
 }
 export default Split;

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

@@ -2,12 +2,13 @@ import React from 'react';
 import { LensButtonProps } from '../../types';
 declare const TabWrapper: import("@emotion/styled").StyledComponent<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TabWrapperProps, object>;
 export declare const Tab: ({ children, isActive, htmlTag, icon, ...props }: TabProps & React.ComponentProps<typeof TabWrapper> & Omit<LensButtonProps, keyof TabProps & React.ComponentProps<typeof TabWrapper>>) => React.JSX.Element;
-declare const Tabs: ({ children, scrollOffset, hasFullTabs, isPilledDesign, ...props }: TabsProps) => React.JSX.Element;
+declare const Tabs: ({ children, scrollOffset, hasFullTabs, isPilledDesign, hasBottomBorder, ...props }: TabsProps) => React.JSX.Element;
 type TabsProps = {
     scrollOffset?: number | string;
     hasFullTabs?: boolean;
     children?: React.ReactNode;
     isPilledDesign?: boolean;
+    hasBottomBorder?: boolean;
 };
 type TabProps = {
     isActive?: boolean;

package/dist/types/utilities/styles.d.ts

@@ -3,4 +3,5 @@ export function getRadius(size: any): string;
 export function getFontWeight(fontWeight: any): string;
 export function getShadow(size: any): string;
 export function getFocusRing(color: any, position: any): string;
+export function getListContainer(tag: any): string;
 export function getPlacement(maxHeight: any, placement: any): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "11.30.4",
+  "version": "11.32.0",
   "packageManager": "pnpm@9.8.0",
   "scripts": {
     "preinstall": "npx only-allow pnpm",