@loomhq/lens 11.30.0 → 11.30.2

package/dist/cjs/index.js

@@ -419,7 +419,7 @@ var getColorValue = (color) => {
   }
 };
 
-// src/utilities/size.js
+// src/utilities/size.ts
 var u = (amount) => amount && `calc(${amount} * var(--lns-unit, ${unit}px))`;
 var getSizeValue = (size) => {
   if (size in spaces) {
@@ -473,7 +473,7 @@ function useMedia(queries, values, defaultValue) {
   return value;
 }
 
-// src/utilities/responsive.js
+// src/utilities/responsive.ts
 var getMediaCss = (widthType, breakpoint, declaration) => `@media(${widthType}: ${breakpoint}){${declaration}}`;
 var arrayToBreakpoints = (values) => {
   const smallestBreakpoint = Object.values(breakpoints)[0];
@@ -555,11 +555,11 @@ var transformColumns = (columns) => {
 var getResponsiveColumns = (columns) => {
   if (columns) {
     if (typeof columns === "object" && !Array.isArray(columns)) {
-      const columnsValesObject = {};
+      const columnsValuesObject = {};
       Object.entries(columns).forEach(
-        ([key, value]) => columnsValesObject[key] = transformColumns(value)
+        ([key, value]) => columnsValuesObject[key] = transformColumns(value)
       );
-      return objectToBreakpoints("grid-template-columns", columnsValesObject);
+      return objectToBreakpoints("grid-template-columns", columnsValuesObject);
     }
     return `grid-template-columns: ${transformColumns(columns)};`;
   }
@@ -622,7 +622,7 @@ var pascalCaseToKebabCase = (string) => {
   return string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
 };
 
-// src/variables.js
+// src/variables.ts
 var unit = 8;
 var textSizes = {
   small: {
@@ -4805,6 +4805,7 @@ function getInitialDelaySpeed(delay) {
 }
 var Tooltip = (_a) => {
   var _b = _a, {
+    ariaLive = false,
     children,
     content,
     shortcut,
@@ -4820,6 +4821,7 @@ var Tooltip = (_a) => {
     verticalAlign = "middle",
     delay = "immediate"
   } = _b, rest = __objRest(_b, [
+    "ariaLive",
     "children",
     "content",
     "shortcut",
@@ -4906,7 +4908,7 @@ var Tooltip = (_a) => {
       ref: (0, import_react_laag3.mergeRefs)(triggerProps.ref, focusRef)
     }),
     children
-  ), isOpen && renderLayer(
+  ), ariaLive && /* @__PURE__ */ import_react34.default.createElement("span", { className: "srOnly", "aria-live": "polite" }, isOpen && content), isOpen && renderLayer(
     /* @__PURE__ */ import_react34.default.createElement("div", __spreadProps(__spreadValues({}, layerProps), { style: __spreadProps(__spreadValues({}, layerProps.style), { zIndex }) }), /* @__PURE__ */ import_react34.default.createElement(
       TooltipBox,
       __spreadValues({

package/dist/esm/index.js

@@ -200,7 +200,7 @@ var getColorValue = (color) => {
   }
 };
 
-// src/utilities/size.js
+// src/utilities/size.ts
 var u = (amount) => amount && `calc(${amount} * var(--lns-unit, ${unit}px))`;
 var getSizeValue = (size) => {
   if (size in spaces) {
@@ -254,7 +254,7 @@ function useMedia(queries, values, defaultValue) {
   return value;
 }
 
-// src/utilities/responsive.js
+// src/utilities/responsive.ts
 var getMediaCss = (widthType, breakpoint, declaration) => `@media(${widthType}: ${breakpoint}){${declaration}}`;
 var arrayToBreakpoints = (values) => {
   const smallestBreakpoint = Object.values(breakpoints)[0];
@@ -336,11 +336,11 @@ var transformColumns = (columns) => {
 var getResponsiveColumns = (columns) => {
   if (columns) {
     if (typeof columns === "object" && !Array.isArray(columns)) {
-      const columnsValesObject = {};
+      const columnsValuesObject = {};
       Object.entries(columns).forEach(
-        ([key, value]) => columnsValesObject[key] = transformColumns(value)
+        ([key, value]) => columnsValuesObject[key] = transformColumns(value)
       );
-      return objectToBreakpoints("grid-template-columns", columnsValesObject);
+      return objectToBreakpoints("grid-template-columns", columnsValuesObject);
     }
     return `grid-template-columns: ${transformColumns(columns)};`;
   }
@@ -403,7 +403,7 @@ var pascalCaseToKebabCase = (string) => {
   return string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
 };
 
-// src/variables.js
+// src/variables.ts
 var unit = 8;
 var textSizes = {
   small: {
@@ -4586,6 +4586,7 @@ function getInitialDelaySpeed(delay) {
 }
 var Tooltip = (_a) => {
   var _b = _a, {
+    ariaLive = false,
     children,
     content,
     shortcut,
@@ -4601,6 +4602,7 @@ var Tooltip = (_a) => {
     verticalAlign = "middle",
     delay = "immediate"
   } = _b, rest = __objRest(_b, [
+    "ariaLive",
     "children",
     "content",
     "shortcut",
@@ -4687,7 +4689,7 @@ var Tooltip = (_a) => {
       ref: mergeRefs(triggerProps.ref, focusRef)
     }),
     children
-  ), isOpen && renderLayer(
+  ), ariaLive && /* @__PURE__ */ React36.createElement("span", { className: "srOnly", "aria-live": "polite" }, isOpen && content), isOpen && renderLayer(
     /* @__PURE__ */ React36.createElement("div", __spreadProps(__spreadValues({}, layerProps), { style: __spreadProps(__spreadValues({}, layerProps.style), { zIndex }) }), /* @__PURE__ */ React36.createElement(
       TooltipBox,
       __spreadValues({

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

@@ -11,11 +11,17 @@ interface ButtonProps {
     icon?: React.ReactNode;
     iconPosition?: 'left' | 'right';
     logoSrc?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     hasLoader?: boolean;
     htmlTag?: 'button' | 'a';
     href?: string;
     target?: string;
+    type?: string;
     refHandler?: (ref: HTMLButtonElement) => void;
+    /** @deprecated Usage of className results in non-standard components */
+    className?: string;
+    /** @deprecated Usage of style results in non-standard components */
+    style?: any;
 }
 interface ButtonWrapperProps {
     hasNoPaddingRight?: boolean;

package/dist/types/components/color-picker/color-picker.d.ts

@@ -4,7 +4,7 @@ declare const ColorPicker: ({ defaultColor, confirmButton, swatches, onChange, .
 type ColorPickerProps = {
     defaultColor?: string;
     confirmButton?: React.ReactNode;
-    swatches?: [];
-    onChange?: () => void;
+    swatches?: string[];
+    onChange?: (selectedColor: string) => void;
 };
 export default ColorPicker;

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

@@ -8,6 +8,10 @@ export declare const availableHtmlTags: string[];
 interface SharedProps {
     backgroundColor?: string;
     backgroundImage?: string;
+    /**
+     * @deprecated Usage of className results in non-standard components
+     */
+    className?: string;
     contentColor?: string;
     borderColor?: string;
     radius?: 'medium' | 'large' | 'xlarge' | 'full';
@@ -43,6 +47,8 @@ interface SharedProps {
     zIndex?: number;
     borderWidth?: string | number;
     refHandler?: (ref: HTMLElement | HTMLDivElement | HTMLSpanElement) => void;
+    /** @deprecated Usage of style results in non-standard components */
+    style?: any;
 }
 interface ContainerProps extends SharedProps {
     htmlTag?: 'div' | 'header' | 'article' | 'section' | 'nav' | 'aside' | 'footer' | 'main' | 'span';

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

@@ -5,18 +5,19 @@ declare const Distribute: ({ children, gap, direction, alignment, isSpread, html
 export declare const availableDirections: string[];
 export declare const availableAlignments: string[];
 export declare const availableHtmlTags: string[];
+type Alignment = 'start' | 'center' | 'end' | 'stretch';
 type DistributeProps = {
     children: React.ReactNode;
     direction?: ResponsiveType<'row' | 'column'>;
-    alignment?: ResponsiveType<'start' | 'center' | 'end' | 'stretch'>;
+    alignment?: Alignment | Alignment[];
     isSpread?: ResponsiveType<true | false>;
     htmlTag?: 'div' | 'header' | 'article' | 'section' | 'nav' | 'aside' | 'footer' | 'main';
     gap?: string | number;
 };
 type DistributeWrapperProps = {
     flexDirection?: ResponsiveType<'row' | 'column'>;
-    flexAlign?: ResponsiveType<'start' | 'center' | 'end' | 'stretch'>;
-    isSpread?: ResponsiveType<true | false>;
+    flexAlign?: Alignment | Alignment[];
+    isSpread?: boolean | boolean[];
     gap?: string | number;
     as?: string;
 };

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

@@ -10,8 +10,9 @@ declare class Layout extends Component<LayoutProps> {
     }) => React.JSX.Element;
     render(): React.JSX.Element;
 }
+type Alignments = 'start' | 'center' | 'end' | 'stretch';
 type LayoutProps = {
-    alignment?: ResponsiveType<'start' | 'center' | 'end' | 'stretch'>;
+    alignment?: Alignments | Alignments[];
     gap?: ResponsiveType<string | number>;
     children?: React.ReactNode;
 };

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

@@ -4,11 +4,20 @@ declare const Link: ({ children, href, variant, htmlTag, isDisabled, ...props }:
 export declare const availableVariants: string[];
 type LinkProps = {
     children?: React.ReactNode;
+    /**
+     * @deprecated Usage of className results in non-standard components
+     */
+    className?: string;
     href?: string;
     variant?: 'neutral' | 'primary';
     htmlTag?: 'button' | 'a';
     isDisabled?: boolean;
     onClick?: React.ReactEventHandler;
+    /**
+     * @deprecated Usage of style results in non-standard components
+     */
+    style?: any;
+    target?: string;
 };
 type LinkWrapperProps = {
     children?: React.ReactNode;
@@ -16,5 +25,6 @@ type LinkWrapperProps = {
     disabled?: boolean;
     variant?: 'neutral' | 'primary';
     as?: string;
+    target?: string;
 };
 export default Link;

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

@@ -29,6 +29,8 @@ interface TextProps {
     htmlTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span' | 'div';
     children?: React.ReactNode;
     sizeMinMax?: string[];
+    /** @deprecated Usage of className results in non-standard components */
+    className?: string;
 }
 interface TextWrapperProps extends TextProps {
     as?: string;

package/dist/types/components/text-button/text-button.d.ts

@@ -12,6 +12,7 @@ type TextButtonProps = {
     offsetSide?: 'left' | 'right';
     href?: string;
     target?: string;
+    type?: string;
 };
 type TextButtonWrapperProps = {
     icon?: React.ReactNode;

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

@@ -1,20 +1,22 @@
 import React from 'react';
+import { Size } from '../../utilities';
 type DelaySpeed = 'immediate' | 'long';
 declare const TooltipBoxWrapper: import("@emotion/styled").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TooltipBoxProps, object>;
 declare const ShortcutWrapper: import("@emotion/styled").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement>>, object>;
 export declare const ShortcutBox: ({ children, }: React.ComponentProps<typeof ShortcutWrapper>) => React.JSX.Element;
 export declare const TooltipBox: ({ children, maxWidth, onMouseEnter, onMouseLeave, layerProps, zIndex, ...rest }: TooltipBoxProps & React.ComponentProps<typeof TooltipBoxWrapper>) => React.JSX.Element;
-declare const Tooltip: ({ children, content, shortcut, placement, keepOpen, triggerOffset, maxWidth, isInline, isDisabled, container, tabIndex, zIndex, verticalAlign, delay, ...rest }: TooltipProps) => React.JSX.Element;
+declare const Tooltip: ({ ariaLive, children, content, shortcut, placement, keepOpen, triggerOffset, maxWidth, isInline, isDisabled, container, tabIndex, zIndex, verticalAlign, delay, ...rest }: TooltipProps) => React.JSX.Element;
 export declare const availablePlacements: string[];
 type TooltipBoxProps = {
     children?: React.ReactNode;
-    maxWidth?: number | string | [];
+    maxWidth?: Size | [];
     onMouseEnter?: React.ReactEventHandler;
     onMouseLeave?: React.ReactEventHandler;
     layerProps?: any;
     zIndex?: number;
 };
 type TooltipProps = {
+    ariaLive?: boolean;
     children?: React.ReactNode;
     container?: HTMLElement | (() => HTMLElement) | string;
     content?: React.ReactNode;
@@ -22,7 +24,7 @@ type TooltipProps = {
     isDisabled?: boolean;
     isInline?: boolean;
     keepOpen?: boolean;
-    maxWidth?: number | string | [];
+    maxWidth?: Size | [];
     placement?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'leftTop' | 'leftCenter' | 'leftBottom' | 'rightTop' | 'rightCenter' | 'rightBottom';
     triggerOffset?: number;
     verticalAlign?: string;

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

@@ -1,15 +1,22 @@
-export function getMediaCss(widthType: any, breakpoint: any, declaration: any): string;
-export function arrayToBreakpoints(values: any): string;
-export function objectToBreakpoints(property: any, obj: any): string;
-export function getResponsiveOneOf(property: any, valueArray: any): string;
-export function getAlignmentStyles(prop: any, alignments: any): string;
-export function getResponsiveBoolean(property: any, valueArray: any, booleanValue: any): string;
-export function getResponsiveNumber(property: any, number: any): string;
-export function getResponsiveColumns(columns: any): string;
-export function getResponsiveGridSections(gridSections: any, sectionType: any): string;
-export function Media({ children, queries, values, defaultValue }: {
+import { Breakpoint } from '../variables';
+import { Size } from './size';
+import { ResponsiveGridSections, ResponsiveType } from '../types';
+export declare const getMediaCss: (widthType: string, breakpoint: string, declaration: string) => string;
+export declare const arrayToBreakpoints: (values: string[]) => string;
+export type BreakpointProperties = Breakpoint | 'default';
+export type BreakpointObject = Partial<Record<BreakpointProperties, string>>;
+export declare const objectToBreakpoints: (property: string, obj: BreakpointObject) => string;
+export declare const getResponsiveOneOf: (property: string, valueArray: ResponsiveType<string>) => string;
+export declare const getAlignmentStyles: (prop: string | string[], alignments: Record<string, string>) => string;
+export declare const getResponsiveBoolean: (property: string, valueArray: string[], booleanValue: boolean | boolean[]) => string;
+export declare const getResponsiveNumber: (property: string, number: ResponsiveType<number | string>) => string;
+type SizeParam = Size | Size[];
+export declare const getResponsiveColumns: (columns: Record<Breakpoint, SizeParam>) => string;
+export declare const getResponsiveGridSections: (gridSections: ResponsiveGridSections, sectionType: string) => string;
+export declare const Media: ({ children, queries, values, defaultValue }: {
     children: any;
     queries: any;
     values: any;
     defaultValue: any;
-}): any;
+}) => any;
+export {};

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

@@ -1,3 +1,9 @@
-export function u(amount: any): string;
-export function getSizeValue(size: any): string;
-export function getSize(property: any, size: any): string;
+import { Breakpoint, Space } from '../variables';
+export declare const u: (amount: number) => string;
+/**
+ * @example
+ * Sample values: "large", 42, "80px"
+ */
+export type Size = Space | number | string;
+export declare const getSizeValue: (size: Size) => string;
+export declare const getSize: (property: string, size: Size | Size[] | Partial<Record<Breakpoint, Size>>) => string;

package/dist/types/variables.d.ts

@@ -1,5 +1,5 @@
-export const unit: 8;
-export const textSizes: {
+export declare const unit = 8;
+export declare const textSizes: {
     small: {
         fontSize: number;
         lineHeight: number;
@@ -49,46 +49,38 @@ export const textSizes: {
         lineHeight: number;
     };
 };
-export namespace fontWeights {
-    const book: number;
-    const bold: number;
-}
-export namespace radii {
-    const medium: string;
-    const large: string;
-    const xlarge: string;
-    const full: string;
-}
-export namespace shadows {
-    export const small: string;
-    const medium_1: string;
-    export { medium_1 as medium };
-    const large_1: string;
-    export { large_1 as large };
-}
-export namespace spaces {
-    export const xsmall: number;
-    const small_1: number;
-    export { small_1 as small };
-    const medium_2: number;
-    export { medium_2 as medium };
-    const large_2: number;
-    export { large_2 as large };
-    const xlarge_1: number;
-    export { xlarge_1 as xlarge };
-    export const xxlarge: number;
-}
-export namespace breakpoints {
-    const xsmall_1: string;
-    export { xsmall_1 as xsmall };
-    const small_2: string;
-    export { small_2 as small };
-    const medium_3: string;
-    export { medium_3 as medium };
-    const large_3: string;
-    export { large_3 as large };
-}
-export const gradients: {
+export declare const fontWeights: {
+    book: number;
+    bold: number;
+};
+export declare const radii: {
+    medium: string;
+    large: string;
+    xlarge: string;
+    full: string;
+};
+export declare const shadows: {
+    small: string;
+    medium: string;
+    large: string;
+};
+export declare const spaces: {
+    xsmall: number;
+    small: number;
+    medium: number;
+    large: number;
+    xlarge: number;
+    xxlarge: number;
+};
+export type Space = keyof typeof spaces;
+export declare const breakpoints: {
+    xsmall: string;
+    small: string;
+    medium: string;
+    large: string;
+};
+export type Breakpoint = keyof typeof breakpoints;
+export declare const gradients: {
     'ai-primary': string;
     'ai-secondary': string;
 };

package/package.json

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