@hopper-ui/styled-system - npm Package Compare versions

Comparing version 0.3.0 to 1.0.0

CHANGELOG.md

 # @hopper-ui/styled-system
 
+## 1.0.0
+
+### Major Changes
+
+- 93a1a16: - Changed the useStyledSystem hook to return an object containing the className and the style, instead of merging it with the input props.
+  - Added some sizing options while we wait for the sizing tokens
+
 ## 0.3.0
@@ -4,0 +11,0 @@

dist/global-styles/BodyStyleProvider.js

@@ -1,2 +0,2 @@
-export { BodyStyleProvider } from '../chunk-SE26VHVR.js';
+export { BodyStyleProvider } from '../chunk-HPTCF3O5.js';
 import '../chunk-3YM73BQP.js';
@@ -6,5 +6,5 @@ import '../chunk-B6ZBFYWJ.js';
 import '../chunk-YPIK2HRL.js';
-import '../chunk-64BX3HCB.js';
+import '../chunk-Y6PI5JPG.js';
 import '../chunk-U5R6ZXH3.js';
 import '../chunk-V7X6ANEM.js';
 import '../chunk-6LX4VMOV.js';

dist/html-wrappers/html.d.ts

@@ -0,5 +1,4 @@
+import { StyledSystemProps } from '../styled-system-props.js';
 import * as react from 'react';
 import { ComponentProps } from 'react';
-import { HtmlElementProps } from './htmlElement.js';
-import '../styled-system-props.js';
 import 'csstype';
@@ -13,55 +12,55 @@ import '../responsive/useResponsiveValue.js';
 */
-declare const Address: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"address">, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const Address: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLElement>>;
 /**
  * A specialized wrapping component for HTML `article` element that allows style props.
 */
-declare const Article: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"article">, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const Article: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLElement>>;
 /**
  * A specialized wrapping component for HTML `aside` element that allows style props.
 */
-declare const Aside: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"aside">, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const Aside: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLElement>>;
 /**
  * A specialized wrapping component for HTML `footer` element that allows style props.
 */
-declare const HtmlFooter: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"footer">, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const HtmlFooter: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLElement>>;
 /**
  * A specialized wrapping component for HTML `h1` element that allows style props.
 */
-declare const HtmlH1: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"h1">, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+declare const HtmlH1: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
 /**
  * A specialized wrapping component for HTML `h2` element that allows style props.
 */
-declare const HtmlH2: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"h2">, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+declare const HtmlH2: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
 /**
  * A specialized wrapping component for HTML `h3` element that allows style props.
 */
-declare const HtmlH3: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"h3">, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+declare const HtmlH3: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
 /**
  * A specialized wrapping component for HTML `h4` element that allows style props.
 */
-declare const HtmlH4: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"h4">, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+declare const HtmlH4: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
 /**
  * A specialized wrapping component for HTML `h5` element that allows style props.
 */
-declare const HtmlH5: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"h5">, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+declare const HtmlH5: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
 /**
  * A specialized wrapping component for HTML `h6` element that allows style props.
 */
-declare const HtmlH6: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"h6">, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+declare const HtmlH6: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
 /**
  * A specialized wrapping component for HTML `header` element that allows style props.
 */
-declare const HtmlHeader: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"header">, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const HtmlHeader: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLElement>>;
 /**
  * A specialized wrapping component for HTML `main` element that allows style props.
 */
-declare const Main: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"main">, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const Main: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLElement>>;
 /**
  * A specialized wrapping component for HTML `nav` element that allows style props.
 */
-declare const Nav: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"nav">, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const Nav: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLElement>>;
 /**
  * A specialized wrapping component for HTML `section` element that allows style props.
 */
-declare const HtmlSection: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"section">, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const HtmlSection: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLElement>>;
 type AddressProps = ComponentProps<typeof Address>;
@@ -84,19 +83,19 @@ type ArticleProps = ComponentProps<typeof Article>;
 */
-declare const Div: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"div">, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const Div: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 /**
  * A specialized wrapping component for HTML `p` element that allows style props.
 */
-declare const HtmlParagraph: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"p">, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+declare const HtmlParagraph: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 /**
  * A specialized wrapping component for HTML `ol` element that allows style props.
 */
-declare const OL: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"ol">, "ref"> & react.RefAttributes<HTMLOListElement>>;
+declare const OL: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLOListElement>>;
 /**
  * A specialized wrapping component for HTML `ul` element that allows style props.
 */
-declare const UL: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"ul">, "ref"> & react.RefAttributes<HTMLUListElement>>;
+declare const UL: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLUListElement>>;
 /**
  * A specialized wrapping component for HTML `li` element that allows style props.
 */
-declare const LI: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"li">, "ref"> & react.RefAttributes<HTMLLIElement>>;
+declare const LI: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLLIElement>>;
 type DivProps = ComponentProps<typeof Div>;
@@ -110,7 +109,7 @@ type HtmlParagraphProps = ComponentProps<typeof HtmlParagraph>;
 */
-declare const A: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"a">, "ref"> & react.RefAttributes<HTMLAnchorElement>>;
+declare const A: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLAnchorElement>>;
 /**
  * A specialized wrapping component for HTML `span` element that allows style props.
 */
-declare const Span: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"span">, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+declare const Span: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLSpanElement>>;
 type AProps = ComponentProps<typeof A>;
@@ -121,3 +120,3 @@ type SpanProps = ComponentProps<typeof Span>;
 */
-declare const Img: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"img">, "ref"> & react.RefAttributes<HTMLImageElement>>;
+declare const Img: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLImageElement>>;
 type ImgProps = ComponentProps<typeof Img>;
@@ -127,27 +126,27 @@ /**
 */
-declare const Table: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"table">, "ref"> & react.RefAttributes<HTMLTableElement>>;
+declare const Table: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLTableElement>>;
 /**
  * A specialized wrapping component for HTML `thead` element that allows style props.
 */
-declare const THead: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"thead">, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const THead: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
 /**
  * A specialized wrapping component for HTML `tbody` element that allows style props.
 */
-declare const TBody: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"tbody">, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TBody: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
 /**
  * A specialized wrapping component for HTML `tfoot` element that allows style props.
 */
-declare const TFoot: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"tfoot">, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TFoot: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
 /**
  * A specialized wrapping component for HTML `th` element that allows style props.
 */
-declare const TH: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"th">, "ref"> & react.RefAttributes<HTMLTableHeaderCellElement>>;
+declare const TH: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLTableHeaderCellElement>>;
 /**
  * A specialized wrapping component for HTML `tr` element that allows style props.
 */
-declare const TR: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"tr">, "ref"> & react.RefAttributes<HTMLTableRowElement>>;
+declare const TR: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLTableRowElement>>;
 /**
  * A specialized wrapping component for HTML `td` element that allows style props.
 */
-declare const TD: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"td">, "ref"> & react.RefAttributes<HTMLTableDataCellElement>>;
+declare const TD: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLTableDataCellElement>>;
 type TableProps = ComponentProps<typeof Table>;
@@ -163,19 +162,19 @@ type THeadProps = ComponentProps<typeof THead>;
 */
-declare const HtmlButton: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"button">, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const HtmlButton: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 /**
  * A specialized wrapping component for HTML `form` element that allows style props.
 */
-declare const HtmlForm: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"form">, "ref"> & react.RefAttributes<HTMLFormElement>>;
+declare const HtmlForm: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLFormElement>>;
 /**
  * A specialized wrapping component for HTML `input` element that allows style props.
 */
-declare const HtmlInput: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"input">, "ref"> & react.RefAttributes<HTMLInputElement>>;
+declare const HtmlInput: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 /**
  * A specialized wrapping component for HTML `label` element that allows style props.
 */
-declare const HtmlLabel: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"label">, "ref"> & react.RefAttributes<HTMLLabelElement>>;
+declare const HtmlLabel: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLLabelElement>>;
 /**
  * A specialized wrapping component for HTML `textarea` element that allows style props.
 */
-declare const HtmlTextArea: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"textarea">, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
+declare const HtmlTextArea: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, keyof StyledSystemProps> & StyledSystemProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
 type HtmlButtonProps = ComponentProps<typeof HtmlButton>;
@@ -182,0 +181,0 @@ type HtmlFormProps = ComponentProps<typeof HtmlForm>;

dist/html-wrappers/html.js

@@ -1,5 +0,5 @@
-export { A, Address, Article, Aside, Div, HtmlButton, HtmlFooter, HtmlForm, HtmlH1, HtmlH2, HtmlH3, HtmlH4, HtmlH5, HtmlH6, HtmlHeader, HtmlInput, HtmlLabel, HtmlParagraph, HtmlSection, HtmlTextArea, Img, LI, Main, Nav, OL, Span, TBody, TD, TFoot, TH, THead, TR, Table, UL } from '../chunk-GM53YQQK.js';
-import '../chunk-3JABKEIH.js';
-import '../chunk-P2EJTPCQ.js';
-import '../chunk-T2LQYER5.js';
+export { A, Address, Article, Aside, Div, HtmlButton, HtmlFooter, HtmlForm, HtmlH1, HtmlH2, HtmlH3, HtmlH4, HtmlH5, HtmlH6, HtmlHeader, HtmlInput, HtmlLabel, HtmlParagraph, HtmlSection, HtmlTextArea, Img, LI, Main, Nav, OL, Span, TBody, TD, TFoot, TH, THead, TR, Table, UL } from '../chunk-XISFZQD3.js';
+import '../chunk-RG533UHT.js';
+import '../chunk-IZYWFDT7.js';
+import '../chunk-ACHT4RXQ.js';
 import '../chunk-PCGVOTW3.js';
@@ -6,0 +6,0 @@ import '../chunk-SFOVKOPG.js';

dist/html-wrappers/htmlElement.d.ts

@@ -10,4 +10,6 @@ import * as react from 'react';
 type HtmlElementProps<T extends keyof JSX.IntrinsicElements> = StyledComponentProps<T>;
-declare function htmlElement<T extends keyof JSX.IntrinsicElements>(elementType: T): react.ForwardRefExoticComponent<react.PropsWithoutRef<HtmlElementProps<T>> & react.RefAttributes<ElementRef<T>>>;
+declare const GlobalHtmlElementCssSelector = "hop-Html";
+declare const GlobalHtmlElementSpecificCssSelector: (elementType: string) => string;
+declare function htmlElement<T extends keyof JSX.IntrinsicElements>(elementType: T): react.ForwardRefExoticComponent<react.PropsWithoutRef<StyledComponentProps<T>> & react.RefAttributes<ElementRef<T>>>;
 
-export { type HtmlElementProps, htmlElement };
+export { GlobalHtmlElementCssSelector, GlobalHtmlElementSpecificCssSelector, type HtmlElementProps, htmlElement };

dist/html-wrappers/htmlElement.js

@@ -1,4 +0,4 @@
-export { htmlElement } from '../chunk-3JABKEIH.js';
-import '../chunk-P2EJTPCQ.js';
-import '../chunk-T2LQYER5.js';
+export { GlobalHtmlElementCssSelector, GlobalHtmlElementSpecificCssSelector, htmlElement } from '../chunk-RG533UHT.js';
+import '../chunk-IZYWFDT7.js';
+import '../chunk-ACHT4RXQ.js';
 import '../chunk-PCGVOTW3.js';
@@ -5,0 +5,0 @@ import '../chunk-SFOVKOPG.js';

dist/index.d.ts

@@ -6,3 +6,3 @@ export { ColorScheme, ColorSchemeContext, ColorSchemeContextType, ColorSchemeOrSystem, useColorSchemeContext } from './color-scheme/ColorSchemeContext.js';
 export { A, AProps, Address, AddressProps, Article, ArticleProps, Aside, AsideProps, Div, DivProps, HtmlButton, HtmlButtonProps, HtmlFooter, HtmlFooterProps, HtmlForm, HtmlFormProps, HtmlH1, HtmlH1Props, HtmlH2, HtmlH2Props, HtmlH3, HtmlH3Props, HtmlH4, HtmlH4Props, HtmlH5, HtmlH5Props, HtmlH6, HtmlH6Props, HtmlHeader, HtmlHeaderProps, HtmlInput, HtmlInputProps, HtmlLabel, HtmlLabelProps, HtmlParagraph, HtmlParagraphProps, HtmlSection, HtmlSectionProps, HtmlTextArea, HtmlTextAreaProps, Img, ImgProps, LI, LIProps, Main, MainProps, Nav, NavProps, OL, OLProps, Span, SpanProps, TBody, TBodyProps, TD, TDProps, TFoot, TFootProps, TH, THProps, THead, THeadProps, TR, TRProps, Table, TableProps, UL, ULProps } from './html-wrappers/html.js';
-export { HtmlElementProps, htmlElement } from './html-wrappers/htmlElement.js';
+export { GlobalHtmlElementCssSelector, GlobalHtmlElementSpecificCssSelector, HtmlElementProps, htmlElement } from './html-wrappers/htmlElement.js';
 export { BreakpointContext, BreakpointContextType, useBreakpointContext } from './responsive/BreakpointContext.js';
@@ -13,3 +13,3 @@ export { BreakpointProvider, BreakpointProviderProps, DefaultUnsupportedMatchMediaBreakpoint } from './responsive/BreakpointProvider.js';
 export { TokenProvider } from './tokens/TokenProvider.js';
-export { BackgroundColorMapping, BackgroundColorValue, BorderMapping, BorderRadiusMapping, BorderRadiusValue, BorderValue, BoxShadowMapping, BoxShadowValue, ColorExpressionTypes, ColorMapping, ColorValue, ColumnGapValue, ComplexMarginMapping, ComplexMarginValue, ComplexPaddingMapping, ComplexPaddingValue, CssBorder, CssBorderRadius, CssBoxShadow, CssColor, CssFill, CssGap, CssGrid, CssGridTemplate, DataVizColorMapping, DefaultBorderWidthAndStyle, FillValue, FontFamilyMapping, FontFamilyValue, FontSizeMapping, FontSizeValue, FontWeightMapping, FontWeightValue, GapValue, GridAutoColumnsValue, GridAutoRowsValue, GridColumSpanValue, GridRowSpanValue, GridTemplateColumnsValue, GridTemplateRowsValue, HeightValue, IconColorMapping, LineHeightMapping, LineHeightValue, RowGapValue, SimpleMarginMapping, SimpleMarginValue, SimplePaddingMapping, SimplePaddingValue, SizingMapping, SizingValue, SpaceMapping, StrokeValue, TextColorMapping, UNSAFE_BackgroundColorValue, UNSAFE_BorderRadiusValue, UNSAFE_BorderValue, UNSAFE_BoxShadowValue, UNSAFE_ColorValue, UNSAFE_ColumnGapValue, UNSAFE_ComplexMarginValue, UNSAFE_ComplexPaddingValue, UNSAFE_FillValue, UNSAFE_FontFamilyValue, UNSAFE_FontSizeValue, UNSAFE_FontWeightValue, UNSAFE_GapValue, UNSAFE_GridAutoColumnsValue, UNSAFE_GridAutoRowsValue, UNSAFE_GridTemplateColumnsValue, UNSAFE_GridTemplateRowsValue, UNSAFE_HeightValue, UNSAFE_LineHeightValue, UNSAFE_RowGapValue, UNSAFE_SimpleMarginValue, UNSAFE_SimplePaddingValue, UNSAFE_SizingValue, UNSAFE_StrokeValue, UNSAFE_WidthValue, WidthValue, getSystemValue, parseResponsiveSystemValue } from './tokens/token-mappings.js';
+export { BackgroundColorMapping, BackgroundColorValue, BorderMapping, BorderRadiusMapping, BorderRadiusValue, BorderValue, BoxShadowMapping, BoxShadowValue, CSSSizing, ColorExpressionTypes, ColorMapping, ColorValue, ColumnGapValue, ComplexMarginMapping, ComplexMarginValue, ComplexPaddingMapping, ComplexPaddingValue, CssBorder, CssBorderRadius, CssBoxShadow, CssColor, CssFill, CssGap, CssGrid, CssGridTemplate, DataVizColorMapping, DefaultBorderWidthAndStyle, FRValues, FillValue, FontFamilyMapping, FontFamilyValue, FontSizeMapping, FontSizeValue, FontWeightMapping, FontWeightValue, GapValue, GridAutoColumnsValue, GridAutoRowsValue, GridColumSpanValue, GridRowSpanValue, GridTemplateAreasValue, GridTemplateColumnsValue, GridTemplateRowsValue, HeightValue, IconColorMapping, LineHeightMapping, LineHeightValue, Percentage, RowGapValue, SimpleMarginMapping, SimpleMarginValue, SimplePaddingMapping, SimplePaddingValue, SizingMapping, SizingValue, SpaceMapping, StrokeValue, TextColorMapping, UNSAFE_BackgroundColorValue, UNSAFE_BorderRadiusValue, UNSAFE_BorderValue, UNSAFE_BoxShadowValue, UNSAFE_ColorValue, UNSAFE_ColumnGapValue, UNSAFE_ComplexMarginValue, UNSAFE_ComplexPaddingValue, UNSAFE_FillValue, UNSAFE_FontFamilyValue, UNSAFE_FontSizeValue, UNSAFE_FontWeightValue, UNSAFE_GapValue, UNSAFE_GridAutoColumnsValue, UNSAFE_GridAutoRowsValue, UNSAFE_GridTemplateColumnsValue, UNSAFE_GridTemplateRowsValue, UNSAFE_HeightValue, UNSAFE_LineHeightValue, UNSAFE_RowGapValue, UNSAFE_SimpleMarginValue, UNSAFE_SimplePaddingValue, UNSAFE_SizingValue, UNSAFE_StrokeValue, UNSAFE_WidthValue, WidthValue, getSizingValue, getSystemValue, parseResponsiveSystemValue } from './tokens/token-mappings.js';
 export { HopperCssVar, HopperTokenKey, Tokens } from './tokens/tokens.js';
@@ -20,6 +20,6 @@ export { useInsertStyleElement } from './utils/useInsertStyleElement.js';
 export { ThemeComputedStyle } from './utils/useThemeComputedStyle.js';
-export { StyledSystemProvider, StyledSystemProviderProps } from './StyledSystemProvider.js';
+export { GlobalStyledSystemProviderCssSelector, StyledSystemProvider, StyledSystemProviderProps } from './StyledSystemProvider.js';
 export { StyledComponentProps, StyledSystemProps, UnsafePrefix } from './styled-system-props.js';
 export { HopperRootCssClass, StyledSystemRootCssClass } from './styled-system-root-css-class.js';
-export { isStyledSystemProp, useStyledSystem } from './useStyledSystem.js';
+export { StylingProps, isStyledSystemProp, useStyledSystem } from './useStyledSystem.js';
 import 'react';
@@ -26,0 +26,0 @@ import 'react/jsx-runtime';

dist/index.js

@@ -1,9 +0,9 @@
-export { _StyledSystemProvider as StyledSystemProvider } from './chunk-XFDSFXFS.js';
-export { BodyStyleProvider } from './chunk-SE26VHVR.js';
+export { GlobalStyledSystemProviderCssSelector, _StyledSystemProvider as StyledSystemProvider } from './chunk-36LPB7RX.js';
+export { BodyStyleProvider } from './chunk-HPTCF3O5.js';
 export { useIsomorphicLayoutEffect } from './chunk-3YM73BQP.js';
 export { ThemeComputedStyle } from './chunk-B6ZBFYWJ.js';
-export { A, Address, Article, Aside, Div, HtmlButton, HtmlFooter, HtmlForm, HtmlH1, HtmlH2, HtmlH3, HtmlH4, HtmlH5, HtmlH6, HtmlHeader, HtmlInput, HtmlLabel, HtmlParagraph, HtmlSection, HtmlTextArea, Img, LI, Main, Nav, OL, Span, TBody, TD, TFoot, TH, THead, TR, Table, UL } from './chunk-GM53YQQK.js';
-export { htmlElement } from './chunk-3JABKEIH.js';
+export { A, Address, Article, Aside, Div, HtmlButton, HtmlFooter, HtmlForm, HtmlH1, HtmlH2, HtmlH3, HtmlH4, HtmlH5, HtmlH6, HtmlHeader, HtmlInput, HtmlLabel, HtmlParagraph, HtmlSection, HtmlTextArea, Img, LI, Main, Nav, OL, Span, TBody, TD, TFoot, TH, THead, TR, Table, UL } from './chunk-XISFZQD3.js';
+export { GlobalHtmlElementCssSelector, GlobalHtmlElementSpecificCssSelector, htmlElement } from './chunk-RG533UHT.js';
 export { BreakpointProvider, DefaultUnsupportedMatchMediaBreakpoint } from './chunk-MCUHAIA4.js';
-export { TokenProvider } from './chunk-D4JUIZCP.js';
+export { TokenProvider } from './chunk-7WKPFXQZ.js';
 export { Tokens } from './chunk-TAIACQMV.js';
@@ -14,5 +14,5 @@ import './chunk-ZKEMKHXY.js';
 export { useIsomorphicInsertionEffect } from './chunk-YPIK2HRL.js';
-export { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-64BX3HCB.js';
-export { isStyledSystemProp, useStyledSystem } from './chunk-P2EJTPCQ.js';
-export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, IconColorMapping, LineHeightMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSystemValue, parseResponsiveSystemValue } from './chunk-T2LQYER5.js';
+export { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-Y6PI5JPG.js';
+export { isStyledSystemProp, useStyledSystem } from './chunk-IZYWFDT7.js';
+export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, IconColorMapping, LineHeightMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSizingValue, getSystemValue, parseResponsiveSystemValue } from './chunk-ACHT4RXQ.js';
 import './chunk-PCGVOTW3.js';
@@ -19,0 +19,0 @@ export { isResponsiveObject, parseResponsiveValue, useResponsiveValue } from './chunk-SFOVKOPG.js';

dist/styled-system-props.d.ts

 import { Property } from 'csstype';
-import { CSSProperties, JSXElementConstructor, ComponentProps } from 'react';
+import { JSXElementConstructor, ComponentProps } from 'react';
 import { ResponsiveProp } from './responsive/useResponsiveValue.js';
-import { BackgroundColorValue, BorderValue, BorderRadiusValue, BoxShadowValue, ColorValue, ColumnGapValue, FillValue, FontFamilyValue, FontSizeValue, FontWeightValue, GapValue, GridAutoColumnsValue, GridAutoRowsValue, GridColumSpanValue, GridRowSpanValue, GridTemplateColumnsValue, GridTemplateRowsValue, HeightValue, LineHeightValue, ComplexMarginValue, SimpleMarginValue, WidthValue, ComplexPaddingValue, SimplePaddingValue, RowGapValue, StrokeValue, UNSAFE_BackgroundColorValue, UNSAFE_BorderValue, UNSAFE_BorderRadiusValue, UNSAFE_BoxShadowValue, UNSAFE_ColorValue, UNSAFE_GapValue, UNSAFE_FillValue, UNSAFE_FontFamilyValue, UNSAFE_FontSizeValue, UNSAFE_FontWeightValue, UNSAFE_GridAutoColumnsValue, UNSAFE_GridAutoRowsValue, UNSAFE_GridTemplateColumnsValue, UNSAFE_GridTemplateRowsValue, UNSAFE_HeightValue, UNSAFE_LineHeightValue, UNSAFE_ComplexMarginValue, UNSAFE_SimpleMarginValue, UNSAFE_WidthValue, UNSAFE_ComplexPaddingValue, UNSAFE_SimplePaddingValue, UNSAFE_RowGapValue, UNSAFE_StrokeValue } from './tokens/token-mappings.js';
+import { BackgroundColorValue, BorderValue, BorderRadiusValue, BoxShadowValue, ColorValue, ColumnGapValue, FillValue, FontFamilyValue, FontSizeValue, FontWeightValue, GapValue, GridAutoColumnsValue, GridAutoRowsValue, GridColumSpanValue, GridRowSpanValue, GridTemplateAreasValue, GridTemplateColumnsValue, GridTemplateRowsValue, HeightValue, LineHeightValue, ComplexMarginValue, SimpleMarginValue, WidthValue, ComplexPaddingValue, SimplePaddingValue, RowGapValue, StrokeValue, UNSAFE_BackgroundColorValue, UNSAFE_BorderValue, UNSAFE_BorderRadiusValue, UNSAFE_BoxShadowValue, UNSAFE_ColorValue, UNSAFE_GapValue, UNSAFE_FillValue, UNSAFE_FontFamilyValue, UNSAFE_FontSizeValue, UNSAFE_FontWeightValue, UNSAFE_GridAutoColumnsValue, UNSAFE_GridAutoRowsValue, UNSAFE_GridTemplateColumnsValue, UNSAFE_GridTemplateRowsValue, UNSAFE_HeightValue, UNSAFE_LineHeightValue, UNSAFE_ComplexMarginValue, UNSAFE_SimpleMarginValue, UNSAFE_WidthValue, UNSAFE_ComplexPaddingValue, UNSAFE_SimplePaddingValue, UNSAFE_RowGapValue, UNSAFE_StrokeValue } from './tokens/token-mappings.js';
 import './responsive/Breakpoints.js';
@@ -9,4 +9,2 @@
 interface StyledSystemProps {
-    className?: string;
-    style?: CSSProperties;
     /**
@@ -426,3 +424,3 @@ * Sets the `align-content` property.
    */
-    gridTemplateAreas?: ResponsiveProp<Property.GridTemplateAreas>;
+    gridTemplateAreas?: ResponsiveProp<GridTemplateAreasValue>;
     /**
@@ -1326,4 +1324,4 @@ * Sets the `grid-template-columns` property.
 }
-type StyledComponentProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<unknown>> = Omit<ComponentProps<T>, keyof StyledSystemProps> & StyledSystemProps;
+type StyledComponentProps<T> = T extends keyof JSX.IntrinsicElements | JSXElementConstructor<unknown> ? Omit<ComponentProps<T>, keyof StyledSystemProps> & StyledSystemProps : Omit<T, keyof StyledSystemProps> & StyledSystemProps;
 
 export { type StyledComponentProps, type StyledSystemProps, UnsafePrefix };

dist/styled-system-root-css-class.js

@@ -1,2 +0,2 @@
-export { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-64BX3HCB.js';
+export { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-Y6PI5JPG.js';
 import './chunk-6LX4VMOV.js';

dist/StyledSystemProvider.d.ts

@@ -6,3 +6,2 @@ import * as react from 'react';
 import { BreakpointProviderProps } from './responsive/BreakpointProvider.js';
-import './html-wrappers/htmlElement.js';
 import './styled-system-props.js';
@@ -15,2 +14,3 @@ import 'csstype';
 
+declare const GlobalStyledSystemProviderCssSelector = "hop-StyledSystemProvider";
 interface StyledSystemProviderProps extends BreakpointProviderProps, DivProps {
@@ -46,2 +46,2 @@ /** The children of the component */
 
-export { _StyledSystemProvider as StyledSystemProvider, type StyledSystemProviderProps };
+export { GlobalStyledSystemProviderCssSelector, _StyledSystemProvider as StyledSystemProvider, type StyledSystemProviderProps };

dist/StyledSystemProvider.js

@@ -1,9 +0,9 @@
-export { _StyledSystemProvider as StyledSystemProvider } from './chunk-XFDSFXFS.js';
-import './chunk-SE26VHVR.js';
+export { GlobalStyledSystemProviderCssSelector, _StyledSystemProvider as StyledSystemProvider } from './chunk-36LPB7RX.js';
+import './chunk-HPTCF3O5.js';
 import './chunk-3YM73BQP.js';
 import './chunk-B6ZBFYWJ.js';
-import './chunk-GM53YQQK.js';
-import './chunk-3JABKEIH.js';
+import './chunk-XISFZQD3.js';
+import './chunk-RG533UHT.js';
 import './chunk-MCUHAIA4.js';
-import './chunk-D4JUIZCP.js';
+import './chunk-7WKPFXQZ.js';
 import './chunk-TAIACQMV.js';
@@ -14,5 +14,5 @@ import './chunk-ZKEMKHXY.js';
 import './chunk-YPIK2HRL.js';
-import './chunk-64BX3HCB.js';
-import './chunk-P2EJTPCQ.js';
-import './chunk-T2LQYER5.js';
+import './chunk-Y6PI5JPG.js';
+import './chunk-IZYWFDT7.js';
+import './chunk-ACHT4RXQ.js';
 import './chunk-PCGVOTW3.js';
@@ -19,0 +19,0 @@ import './chunk-SFOVKOPG.js';

dist/tokens/token-mappings.js

@@ -1,2 +0,2 @@
-export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, IconColorMapping, LineHeightMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSystemValue, parseResponsiveSystemValue } from '../chunk-T2LQYER5.js';
+export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, IconColorMapping, LineHeightMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSizingValue, getSystemValue, parseResponsiveSystemValue } from '../chunk-ACHT4RXQ.js';
 import '../chunk-PCGVOTW3.js';
@@ -3,0 +3,0 @@ import '../chunk-SFOVKOPG.js';

dist/tokens/TokenProvider.js

@@ -1,2 +0,2 @@
-export { TokenProvider } from '../chunk-D4JUIZCP.js';
+export { TokenProvider } from '../chunk-7WKPFXQZ.js';
 import '../chunk-TAIACQMV.js';
@@ -7,4 +7,4 @@ import '../chunk-ZKEMKHXY.js';
 import '../chunk-YPIK2HRL.js';
-import '../chunk-64BX3HCB.js';
+import '../chunk-Y6PI5JPG.js';
 import '../chunk-U5R6ZXH3.js';
 import '../chunk-6LX4VMOV.js';

dist/useStyledSystem.d.ts

 import { CSSProperties } from 'react';
 import { Breakpoint } from './responsive/Breakpoints.js';
 import { StyledSystemProps } from './styled-system-props.js';
+import { ResponsiveProp } from './responsive/useResponsiveValue.js';
 import 'csstype';
-import './responsive/useResponsiveValue.js';
 import './tokens/token-mappings.js';
 
-type PropHandler = (name: string, value: string | number, context: StylingContext) => void;
+type PropHandler = (name: string, value: ResponsiveProp<string | number | string[]>, context: StylingContext) => void;
 declare const PropsHandlers: Record<string, PropHandler>;
@@ -22,7 +22,10 @@ declare function isStyledSystemProp(name: string): name is keyof typeof PropsHandlers;
 }
-declare function useStyledSystem<TProps extends StyledSystemProps>(props: TProps): Omit<TProps, keyof StyledSystemProps> & {
+interface StylingProps {
     className?: string;
     style?: CSSProperties;
+}
+declare function useStyledSystem<TProps extends StyledSystemProps>(props: TProps): Omit<TProps, keyof StyledSystemProps> & {
+    stylingProps: StylingProps;
 };
 
-export { isStyledSystemProp, useStyledSystem };
+export { type StylingProps, isStyledSystemProp, useStyledSystem };

dist/useStyledSystem.js

@@ -1,3 +0,3 @@
-export { isStyledSystemProp, useStyledSystem } from './chunk-P2EJTPCQ.js';
-import './chunk-T2LQYER5.js';
+export { isStyledSystemProp, useStyledSystem } from './chunk-IZYWFDT7.js';
+import './chunk-ACHT4RXQ.js';
 import './chunk-PCGVOTW3.js';
@@ -4,0 +4,0 @@ import './chunk-SFOVKOPG.js';

package.json

 {
   "name": "@hopper-ui/styled-system",
   "author": "Workleap",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "The styled-system package.",
@@ -6,0 +6,0 @@ "license": "Apache-2.0",

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

568048

increased by0.2%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Lines of code

11209

decreased by-2.51%

No dependency changes