@salty-css/react 0.0.1-alpha.221 → 0.0.1-alpha.223

package/README.md

@@ -1,3 +1,5 @@
+[Get started](#get-started) | [API](#api) | [Website](https://salty-css.dev/) | [GitHub](https://github.com/margarita-form/salty-css) | [NPM](https://www.npmjs.com/package/@salty-css/core)
+
 ![Salty CSS Banner](https://salty-css.dev/assets/banners/dvd.svg)
 
 # Salty CSS - CSS-in-JS library that is kinda sweet
@@ -32,7 +34,7 @@ Fastest way to get started with any framework is `npx salty-css init [directory]
 2. Salty CSS components created with styled function can extend non Salty CSS components (`export const CustomLink = styled(NextJSLink, { ... });`) but those components must take in `className` prop for styles to apply.
 3. Among common types like `string` and `number`, CSS-in-JS properties in Salty CSS do support `functions` and `promises` as values (`styled('span', { base: { color: async () => 'red' } });`) but running asynchronous tasks or importing heavy 3rd party libraries into `*.css.ts` or `*.css.tsx` files can cause longer build times.
 
-## Functions
+## API
 
 ### Styling
 
@@ -57,13 +59,13 @@ Fastest way to get started with any framework is `npx salty-css init [directory]
 Styled function is the main way to use Salty CSS within React. Styled function creates a React component that then can be used anywhere in your app. All styled functions must be created in `.css.ts` or `.css.tsx` files
 
 ```ts
-// components/my-component.css.ts
+// /components/my-component.css.ts
 import { styled } from '@salty-css/react/styled';
 
 // Define a component with a styled function. First argument is the component name or existing component to extend and second argument is the object containing the styles and other options
 export const Component = styled('div', {
-  className: 'wrapper', // Define custom class name that will be included for this component
-  element: 'section', // Define the html element that will be rendered for this component, overrides the first 'div' argument
+  className: 'wrapper', // Define optional custom class name that will be included for this component
+  element: 'section', // Override the html element that will be rendered for this component
   base: {
     // 👉 Add your CSS-in-JS base styles here! 👈
   },
@@ -83,23 +85,43 @@ export const Component = styled('div', {
 });
 ```
 
+Example usage:
+
+```tsx
+import { Component } from './my-component.css';
+
+export const Page = () => {
+  return <Component>Hello world</Component>;
+};
+```
+
 ## Class name function
 
 Create CSS class names with possibility to add scope and media queries etc. Function `className` is quite similar to `styled` but does not allow extending components or classes.
 
 ```ts
-// styles/my-class.css.ts
+// /components/my-class.css.ts
 import { className } from '@salty-css/react/class-name';
 
 // Define a CSS class with className function. First and only argument is the object containing the styles and other options
 export const myClass = className({
-  className: 'wrapper', // Define custom class name that will be included to the scope
+  className: 'wrapper', // Define optional custom class name that will be included to the scope
   base: {
     // 👉 Add your CSS-in-JS base styles here! 👈
   },
 });
 ```
 
+Example usage:
+
+```tsx
+import { myClass } from './my-class.css';
+
+export const Page = () => {
+  return <div className={myClass}>Hello world</div>;
+};
+```
+
 ## Global styles
 
 ```ts
@@ -178,7 +200,7 @@ export default defineVariables({
   },
 
   /* 
-  Conditional variables are used to define styles that depend on a class name (e.g. <div className="theme-dark">). or data-attribute (e.g. <div data-theme="dark">).
+  Conditional variables are used to define styles that depend on a class name (e.g. <div className="theme-dark">). or data-attribute (e.g. <div data-theme="dark">). Names for these variables will be "{theme.backgroundColor}" and "{theme.textColor}".
   */
   conditional: {
     theme: {
@@ -195,6 +217,21 @@ export default defineVariables({
 });
 ```
 
+Example usage:
+
+```ts
+styled('span', {
+  base: {
+    // Use of static font family variable
+    fontFamily: '{colors.fontFamily.heading}',
+    // Use of responsive font size variable
+    fontSize: '{fontSize.heading.regular}',
+    // Use of conditional theme text color variable
+    color: '{theme.textColor}',
+  },
+});
+```
+
 ## Media queries
 
 Create global media queries that can be either used directly as a scope (e.g. `'@MEDIA_QUERY_NAME': { color: 'blue' }`) or imported to be used in JS.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/react",
-  "version": "0.0.1-alpha.221",
+  "version": "0.0.1-alpha.223",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -62,7 +62,7 @@
     }
   },
   "dependencies": {
-    "@salty-css/core": "^0.0.1-alpha.221",
+    "@salty-css/core": "^0.0.1-alpha.223",
     "clsx": ">=2.x",
     "react": ">=19.x || >=18.3.x"
   }