@hopper-ui/styled-system 0.0.0 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @hopper-ui/styled-system
+
+## 0.2.0
+
+### Minor Changes
+
+- 0c4a1c7: Added main, types and style to the package.json
+
+## 0.1.0
+
+### Minor Changes
+
+- 7ef9681: Updated styled system exports

package/README.md

@@ -1,19 +1,40 @@
 # @hopper-ui/styled-system
 
-Ideas from PandaCSS
-- Patterns/JSX Patterns (HStack VStack Truncate)
-    - divider
-    - flex
-    - gloat
-    - grid
-    - gridItem
-    - hstack
-    - stack
-    - truncate
-    - vstack
-    - wrap
-- CSS Variables in style
-    - either a vars prop, cssVars props, or style={{vars: {}}}
-- Negative values for token scale
-    -   margin={-2} should be valid
-- Pseudos could be generated from usage and added to a style tag dynamically, like the GlobalStyleProvider
+Hopper's styled-system offers a collection of utility functions that add style props to your React components. These style props are in sync on hopper-ui's design tokens, are type safe, and support responsive styles.
+
+[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](../../LICENSE)
+[![npm version](https://img.shields.io/npm/v/@hopper-ui/styled-system)](https://www.npmjs.com/package/@hopper-ui/styled-system)
+
+## Installation
+
+Install the following packages:
+
+**With pnpm**
+
+```shell
+pnpm add @hopper-ui/styled-system
+```
+
+**With yarn**
+
+```shell
+yarn add -D @hopper-ui/styled-system
+```
+
+**With npm**
+
+```shell
+npm install -D @hopper-ui/styled-system
+```
+
+## Usage
+
+View the [user's documentation](https://hopper.workleap.design/).
+
+## 🤝 Contributing
+
+View the [contributor's documentation](https://github.com/gsoft-inc/wl-hopper/blob/main/CONTRIBUTING.md).
+
+## License
+
+Copyright © 2023, Workleap. This code is licensed under the Apache License, Version 2.0. You may obtain a copy of this license at https://github.com/gsoft-inc/workleap-license/blob/master/LICENSE.

package/dist/StyledSystemProvider-173b78af.d.ts

@@ -0,0 +1,226 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ElementRef, ComponentProps, ReactNode } from 'react';
+import { aB as StyledComponentProps, B as Breakpoint } from './styled-system-props-1c231c50.js';
+
+type ColorScheme = "light" | "dark";
+type ColorSchemeOrSystem = ColorScheme | "system";
+interface ColorSchemeContextType {
+    colorScheme: ColorScheme;
+    setColorScheme: (newColorScheme: ColorScheme) => void;
+}
+declare const ColorSchemeContext: react.Context<ColorSchemeContextType>;
+declare function useColorSchemeContext(): ColorSchemeContextType;
+
+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>>>;
+
+/**
+ * A specialized wrapping component for HTML `address` element that allows style props.
+*/
+declare const Address: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"address">, "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>>;
+/**
+ * A specialized wrapping component for HTML `aside` element that allows style props.
+*/
+declare const Aside: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"aside">, "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>>;
+/**
+ * A specialized wrapping component for HTML `h1` element that allows style props.
+*/
+declare const HtmlH1: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"h1">, "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>>;
+/**
+ * A specialized wrapping component for HTML `h3` element that allows style props.
+*/
+declare const HtmlH3: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"h3">, "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>>;
+/**
+ * A specialized wrapping component for HTML `h5` element that allows style props.
+*/
+declare const HtmlH5: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"h5">, "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>>;
+/**
+ * A specialized wrapping component for HTML `header` element that allows style props.
+*/
+declare const HtmlHeader: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"header">, "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>>;
+/**
+ * A specialized wrapping component for HTML `nav` element that allows style props.
+*/
+declare const Nav: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"nav">, "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>>;
+type AddressProps = ComponentProps<typeof Address>;
+type ArticleProps = ComponentProps<typeof Article>;
+type AsideProps = ComponentProps<typeof Aside>;
+type HtmlFooterProps = ComponentProps<typeof HtmlFooter>;
+type HtmlH1Props = ComponentProps<typeof HtmlH1>;
+type HtmlH2Props = ComponentProps<typeof HtmlH2>;
+type HtmlH3Props = ComponentProps<typeof HtmlH3>;
+type HtmlH4Props = ComponentProps<typeof HtmlH4>;
+type HtmlH5Props = ComponentProps<typeof HtmlH5>;
+type HtmlH6Props = ComponentProps<typeof HtmlH6>;
+type HtmlHeaderProps = ComponentProps<typeof HtmlHeader>;
+type MainProps = ComponentProps<typeof Main>;
+type NavProps = ComponentProps<typeof Nav>;
+type HtmlSectionProps = ComponentProps<typeof HtmlSection>;
+/**
+ * A specialized wrapping component for HTML `div` element that allows style props.
+*/
+declare const Div: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"div">, "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>>;
+/**
+ * A specialized wrapping component for HTML `ol` element that allows style props.
+*/
+declare const OL: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"ol">, "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>>;
+/**
+ * A specialized wrapping component for HTML `li` element that allows style props.
+*/
+declare const LI: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"li">, "ref"> & react.RefAttributes<HTMLLIElement>>;
+type DivProps = ComponentProps<typeof Div>;
+type HtmlParagraphProps = ComponentProps<typeof HtmlParagraph>;
+type OLProps = ComponentProps<typeof OL>;
+type ULProps = ComponentProps<typeof UL>;
+type LIProps = ComponentProps<typeof LI>;
+/**
+ * A specialized wrapping component for HTML `anchor` element that allows style props.
+*/
+declare const A: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"a">, "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>>;
+type AProps = ComponentProps<typeof A>;
+type SpanProps = ComponentProps<typeof Span>;
+/**
+ * A specialized wrapping component for HTML `img` element that allows style props.
+*/
+declare const Img: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"img">, "ref"> & react.RefAttributes<HTMLImageElement>>;
+type ImgProps = ComponentProps<typeof Img>;
+/**
+ * A specialized wrapping component for HTML `table` element that allows style props.
+*/
+declare const Table: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"table">, "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>>;
+/**
+ * A specialized wrapping component for HTML `tbody` element that allows style props.
+*/
+declare const TBody: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"tbody">, "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>>;
+/**
+ * A specialized wrapping component for HTML `th` element that allows style props.
+*/
+declare const TH: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"th">, "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>>;
+/**
+ * A specialized wrapping component for HTML `td` element that allows style props.
+*/
+declare const TD: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"td">, "ref"> & react.RefAttributes<HTMLTableDataCellElement>>;
+type TableProps = ComponentProps<typeof Table>;
+type THeadProps = ComponentProps<typeof THead>;
+type TBodyProps = ComponentProps<typeof TBody>;
+type TFootProps = ComponentProps<typeof TFoot>;
+type THProps = ComponentProps<typeof TH>;
+type TRProps = ComponentProps<typeof TR>;
+type TDProps = ComponentProps<typeof TD>;
+/**
+ * A specialized wrapping component for HTML `button` element that allows style props.
+*/
+declare const HtmlButton: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"button">, "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>>;
+/**
+ * A specialized wrapping component for HTML `input` element that allows style props.
+*/
+declare const HtmlInput: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"input">, "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>>;
+/**
+ * A specialized wrapping component for HTML `textarea` element that allows style props.
+*/
+declare const HtmlTextArea: react.ForwardRefExoticComponent<Omit<HtmlElementProps<"textarea">, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
+type HtmlButtonProps = ComponentProps<typeof HtmlButton>;
+type HtmlFormProps = ComponentProps<typeof HtmlForm>;
+type HtmlInputProps = ComponentProps<typeof HtmlInput>;
+type HtmlLabelProps = ComponentProps<typeof HtmlLabel>;
+type HtmlTextAreaProps = ComponentProps<typeof HtmlTextArea>;
+
+declare const DefaultUnsupportedMatchMediaBreakpoint: Breakpoint;
+interface BreakpointProviderProps {
+    children: ReactNode;
+    unsupportedMatchMediaBreakpoint?: Breakpoint;
+}
+declare function BreakpointProvider({ children, unsupportedMatchMediaBreakpoint }: BreakpointProviderProps): react_jsx_runtime.JSX.Element;
+
+interface StyledSystemProviderProps extends BreakpointProviderProps, DivProps {
+    /** The children of the component */
+    children: ReactNode;
+    /**
+     * Determines whether the styles should be added to the document's body
+     * By default, it is set to `false`. If set to `true`, it will apply additional styling to the document's body.
+    */
+    withBodyStyle?: boolean;
+    /**
+     * The color scheme to use.
+     */
+    colorScheme: ColorSchemeOrSystem;
+    /**
+     * Default color scheme to use when a user preferred color scheme (system) is not available.
+     */
+    defaultColorScheme?: ColorScheme;
+    /**
+     * Determines whether token CSS variables should be added to the document's head
+     * By default, it is set to `true`, you should not change it unless you want to manage CSS variables via `.css` files
+    */
+    withCssVariables?: boolean;
+}
+/**
+ * StyledSystemProvider is required to be rendered at the root of your application. It is responsible for:
+ * - Adding CSS variables to the document
+ * - Managing color scheme (light, dark, auto)
+ * - Optionally adding body styles to the document
+ */
+declare function StyledSystemProvider({ children, withBodyStyle, withCssVariables, colorScheme, defaultColorScheme, unsupportedMatchMediaBreakpoint, className, ...rest }: StyledSystemProviderProps): react_jsx_runtime.JSX.Element;
+
+export { TH as $, Address as A, NavProps as B, ColorSchemeOrSystem as C, HtmlSectionProps as D, Div as E, HtmlParagraph as F, DivProps as G, HtmlFooter as H, HtmlParagraphProps as I, OLProps as J, ULProps as K, LI as L, Main as M, Nav as N, OL as O, LIProps as P, A as Q, AProps as R, Span as S, SpanProps as T, UL as U, Img as V, ImgProps as W, Table as X, THead as Y, TBody as Z, TFoot as _, ColorScheme as a, TR as a0, TD as a1, TableProps as a2, THeadProps as a3, TBodyProps as a4, TFootProps as a5, THProps as a6, TRProps as a7, TDProps as a8, HtmlButton as a9, HtmlForm as aa, HtmlInput as ab, HtmlLabel as ac, HtmlTextArea as ad, HtmlButtonProps as ae, HtmlFormProps as af, HtmlInputProps as ag, HtmlLabelProps as ah, HtmlTextAreaProps as ai, HtmlElementProps as aj, htmlElement as ak, DefaultUnsupportedMatchMediaBreakpoint as al, BreakpointProviderProps as am, BreakpointProvider as an, StyledSystemProviderProps as ao, StyledSystemProvider as ap, ColorSchemeContextType as b, ColorSchemeContext as c, Article as d, Aside as e, HtmlH1 as f, HtmlH2 as g, HtmlH3 as h, HtmlH4 as i, HtmlH5 as j, HtmlH6 as k, HtmlHeader as l, HtmlSection as m, AddressProps as n, ArticleProps as o, AsideProps as p, HtmlFooterProps as q, HtmlH1Props as r, HtmlH2Props as s, HtmlH3Props as t, useColorSchemeContext as u, HtmlH4Props as v, HtmlH5Props as w, HtmlH6Props as x, HtmlHeaderProps as y, MainProps as z };

package/dist/StyledSystemProvider.css

@@ -0,0 +1 @@
+.UseStyledSystem-module__hop-b-hover___CfKj8:hover{--hop-b-hover: initial;border:var(--hop-b-hover)!important}.UseStyledSystem-module__hop-bb-hover___Hu3-Q:hover{--hop-bb-hover: initial;border-bottom:var(--hop-bb-hover)!important}.UseStyledSystem-module__hop-bl-hover___CzOAl:hover{--hop-bl-hover: initial;border-left:var(--hop-bl-hover)!important}.UseStyledSystem-module__hop-br-hover___vKdvf:hover{--hop-br-hover: initial;border-right:var(--hop-br-hover)!important}.UseStyledSystem-module__hop-bt-hover___i82Tb:hover{--hop-bt-hover: initial;border-top:var(--hop-bt-hover)!important}.UseStyledSystem-module__hop-b-focus___y3r5B:focus-visible{--hop-b-focus: initial;border:var(--hop-b-focus)!important}.UseStyledSystem-module__hop-bb-focus___UzwTX:focus-visible{--hop-bb-focus: initial;border-bottom:var(--hop-bb-focus)!important}.UseStyledSystem-module__hop-bl-focus___u-OfB:focus-visible{--hop-bl-focus: initial;border-left:var(--hop-bl-focus)!important}.UseStyledSystem-module__hop-br-focus___wBhUY:focus-visible{--hop-br-focus: initial;border-right:var(--hop-br-focus)!important}.UseStyledSystem-module__hop-bt-focus___MnZa1:focus-visible{--hop-bt-focus: initial;border-top:var(--hop-bt-focus)!important}.UseStyledSystem-module__hop-b-active___JDXLg:active{--hop-b-active: initial;border:var(--hop-b-active)!important}.UseStyledSystem-module__hop-bb-active___40n0M:active{--hop-bb-active: initial;border-bottom:var(--hop-bb-active)!important}.UseStyledSystem-module__hop-bl-active___TkJsC:active{--hop-bl-active: initial;border-left:var(--hop-bl-active)!important}.UseStyledSystem-module__hop-br-active___TmbHF:active{--hop-br-active: initial;border-right:var(--hop-br-active)!important}.UseStyledSystem-module__hop-bt-active___r8vje:active{--hop-bt-active: initial;border-top:var(--hop-bt-active)!important}.UseStyledSystem-module__hop-bg-hover___LA70G:hover{--hop-bg-hover: initial;background-color:var(--hop-bg-hover)!important}.UseStyledSystem-module__hop-bg-focus___6R-wa:focus-visible{--hop-bg-focus: initial;background-color:var(--hop-bg-focus)!important}.UseStyledSystem-module__hop-bg-active___vfqXn:active{--hop-bg-active: initial;background-color:var(--hop-bg-active)!important}.UseStyledSystem-module__hop-bs-hover___vRDwD:hover{--hop-bs-hover: initial;box-shadow:var(--hop-bs-hover)!important}.UseStyledSystem-module__hop-bs-focus___Nk99m:focus-visible{--hop-bs-focus: initial;box-shadow:var(--hop-bs-focus)!important}.UseStyledSystem-module__hop-bs-active___SYvR1:active{--hop-bs-active: initial;box-shadow:var(--hop-bs-active)!important}.UseStyledSystem-module__hop-c-hover___oebME:hover{--hop-c-hover: initial;color:var(--hop-c-hover)!important}.UseStyledSystem-module__hop-c-focus___m3au4:focus-visible{--hop-c-focus: initial;color:var(--hop-c-focus)!important}.UseStyledSystem-module__hop-c-active___qgNTm:active{--hop-c-active: initial;color:var(--hop-c-active)!important}.UseStyledSystem-module__hop-cs-hover___cvviM:hover{--hop-cs-hover: initial;cursor:var(--hop-cs-hover)!important}.UseStyledSystem-module__hop-f-hover___8xdeJ:hover{--hop-f-hover: initial;fill:var(--hop-f-hover)!important}.UseStyledSystem-module__hop-f-focus___6Ah2L:focus-visible{--hop-f-focus: initial;fill:var(--hop-f-focus)!important}.UseStyledSystem-module__hop-o-hover___cyKhF:hover{--hop-o-hover: initial;opacity:var(--hop-o-hover)!important}.UseStyledSystem-module__hop-o-focus___Kg5kM:focus-visible{--hop-o-focus: initial;opacity:var(--hop-o-focus)!important}.UseStyledSystem-module__hop-o-active___-Crm-:active{--hop-o-active: initial;opacity:var(--hop-o-active)!important}.UseStyledSystem-module__hop-ol-focus___XyC84:focus-visible{--hop-ol-focus: initial;color:var(--hop-ol-focus)!important}:where(.htmlElement-module__html-element___EOSRs),:where(.htmlElement-module__html-element___EOSRs:after),:where(.htmlElement-module__html-element___EOSRs:before){box-sizing:border-box}

package/dist/StyledSystemProvider.d.ts

@@ -1,28 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentProps, ReactNode } from 'react';
-
-interface StyledSystemProviderProps extends ComponentProps<"div"> {
-    /** The children of the component */
-    children: ReactNode;
-    /**
-     * Determines whether the styles should be added to the document's body
-     * By default, it is set to `false`. If set to `true`, it will apply additional styling to the document's body.
-    */
-    withBodyStyle?: boolean;
-    /** The color scheme to use. */
-    colorScheme?: "light" | "dark";
-    /**
-     * Determines whether token CSS variables should be added to the document's head
-     * By default, it is set to `true`, you should not change it unless you want to manage CSS variables via `.css` files
-    */
-    withCssVariables?: boolean;
-}
-/**
- * StyledSystemProvider is required to be rendered at the root of your application. It is responsible for:
- * - Adding CSS variables to the document
- * - Managing color scheme (light, dark, auto)
- * - Optionally adding body styles to the document
- */
-declare function StyledSystemProvider({ children, withBodyStyle, withCssVariables, colorScheme, className, ...rest }: StyledSystemProviderProps): react_jsx_runtime.JSX.Element;
-
-export { StyledSystemProvider, StyledSystemProviderProps };
+import 'react/jsx-runtime';
+import 'react';
+export { ap as StyledSystemProvider, ao as StyledSystemProviderProps } from './StyledSystemProvider-173b78af.js';
+import './styled-system-props-1c231c50.js';
+import 'csstype';