@salty-css/react 0.0.1-alpha.3 → 0.0.1-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/react",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.4",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -15,7 +15,7 @@
     "url": "https://github.com/margarita-form/salty-css/issues"
   },
   "files": [
-    "dist",
+    "**/*",
     "!**/*.tsbuildinfo"
   ],
   "nx": {

package/styled.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes, ReactDOM, ReactNode } from 'react';
+import { Tag, StyledComponentProps, Styles, GeneratorOptions, CreateElementProps, VariantProps, ParentComponentProps } from '../../core/src/types';
+export declare const styled: <const PROPS extends StyledComponentProps, const TAG extends Tag<Required<PROPS>>, const STYLES extends Styles>(tagName: TAG, styles: STYLES, options?: GeneratorOptions) => (<T extends object>(props: (T & CreateElementProps & ParentComponentProps<TAG>) | VariantProps<STYLES> | (TAG extends keyof ReactDOM ? ReactDOM[TAG] extends (...props: infer R) => any ? R[0] : TAG extends string ? HTMLAttributes<HTMLElement> : never : TAG extends string ? HTMLAttributes<HTMLElement> : never)) => ReactNode) & string;

package/dist/README.md

@@ -1,107 +0,0 @@
-# Salty Css
-
-## Basic usage example with Button
-
-### Initial requirements
-
-1. Add `saltyPlugin` to vite or webpack config from `@salty-css/vite` or `@salty-css/webpack`
-2. Create `salty-config.ts` to the root of your project
-3. Import global styles to any regular .css file from `saltygen/index.css` (does not exist during first run, cli command coming later)
-4. Create salty components with styled only inside files that end with `.css.ts`, `.salty.ts` `.styled.ts` or `.styles.ts`
-
-### Code examples
-
-**Salty config**
-
-```tsx
-import { defineConfig } from '@salty-css/core/config';
-
-export const config = defineConfig({
-  variables: {
-    colors: {
-      brand: '#111',
-      highlight: 'yellow',
-    },
-  },
-  global: {
-    html: {
-      backgroundColor: '#f8f8f8',
-    },
-  },
-});
-```
-
-**Your React component file**
-
-```tsx
-import { Wrapper } from '../components/wrapper/wrapper.css';
-import { Button } from '../components/button/button.css';
-
-export const IndexPage = () => {
-  return (
-    <Wrapper>
-      <Button variant="solid" onClick={() => alert('It is a button.')}>
-        Outlined
-      </Button>
-    </Wrapper>
-  );
-};
-```
-
-**Wrapper** (`components/wrapper/wrapper.css.ts`)
-
-```tsx
-import { styled } from '@salty-css/react/styled';
-
-export const Wrapper = styled('div', {
-  display: 'block',
-  padding: '2vw',
-});
-```
-
-**Button** (`components/button/button.css.ts`)
-
-```tsx
-import { styled } from '@salty-css/react/styled';
-
-export const Button = styled('button', {
-  display: 'block',
-  padding: `0.6em 1.2em`,
-  border: '1px solid currentColor',
-  background: 'transparent',
-  color: 'currentColor/40',
-  cursor: 'pointer',
-  transition: '200ms',
-  textDecoration: 'none',
-  '&:hover': {
-    background: 'black',
-    borderColor: 'black',
-    color: 'white',
-  },
-  '&:disabled': {
-    opacity: 0.25,
-    pointerEvents: 'none',
-  },
-  variants: {
-    variant: {
-      outlined: {
-        // same as default styles
-      },
-      solid: {
-        '&:not(:hover)': {
-          background: 'black',
-          borderColor: 'black',
-          color: 'white',
-        },
-        '&:hover': {
-          background: 'transparent',
-          borderColor: 'currentColor',
-          color: 'currentColor',
-        },
-      },
-    },
-  },
-});
-```
-
-More examples coming soon

package/dist/package.json

@@ -1,42 +0,0 @@
-{
-  "name": "@salty-css/react",
-  "version": "0.0.1-alpha.3",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "typings": "./dist/index.d.ts",
-  "type": "module",
-  "license": "MIT",
-  "private": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "homepage": "https://github.com/margarita-form/salty-css",
-  "bugs": {
-    "url": "https://github.com/margarita-form/salty-css/issues"
-  },
-  "files": [
-    "dist",
-    "!**/*.tsbuildinfo"
-  ],
-  "nx": {
-    "name": "react"
-  },
-  "exports": {
-    "./styled": {
-      "import": "./styled.js",
-      "require": "./styled.cjs"
-    },
-    "./styled-client": {
-      "import": "./styled-client.js",
-      "require": "./styled-client.cjs"
-    },
-    "./keyframes": {
-      "import": "./keyframes.js",
-      "require": "./keyframes.cjs"
-    },
-    "./media": {
-      "import": "./media.js",
-      "require": "./media.cjs"
-    }
-  }
-}

package/dist/styled.d.ts

@@ -1,3 +0,0 @@
-import { HTMLAttributes, ReactDOM, ReactNode } from 'react';
-import { Tag, StyledComponentProps, GeneratorOptions, CreateElementProps, VariantProps, ParentComponentProps, StyledParams } from '../../core/src/types';
-export declare const styled: <const PROPS extends StyledComponentProps, const TAG extends Tag<Required<PROPS>>, const PARAMS extends StyledParams>(tagName: TAG, styles: PARAMS, options?: GeneratorOptions) => (<T extends object>(props: (T & CreateElementProps & ParentComponentProps<TAG>) | VariantProps<STYLES> | (TAG extends keyof ReactDOM ? ReactDOM[TAG] extends (...props: infer R) => any ? R[0] : TAG extends string ? HTMLAttributes<HTMLElement> : never : TAG extends string ? HTMLAttributes<HTMLElement> : never)) => ReactNode) & string;