Merge pull request #5 from lobor/styled

some changes

apps/docs/components/CodeDemo.tsx

@@ -20,7 +20,7 @@ const DefaultDemo = () => {
 export const CodeDemo = ({
   Demo = DefaultDemo,
   actions = {},
-  name,
+  name = 'code',
 }: {
   Demo?: ComponentType<Props>;
   actions?: {
@@ -40,7 +40,7 @@ export const CodeDemo = ({
   const hasActions = Object.keys(actions || {}).length > 0;
 
   return (
-    <Box className="dark:border-zinc-800 border-zinc-200 border-2 rounded-md">
+    <Box className="dark:border-zinc-800 border-zinc-800 border rounded-md flex-col">
       <Box className="flex-row flex">
         <Box className="flex-1 p-4 justify-center items-center">
           <Demo
@@ -151,7 +151,7 @@ const Code = ({ show, code }: { show: boolean; code: string }) => {
   const heightRef = useRef(500);
   return show ? (
     <Box
-      className="text-md"
+      className="text-md block"
       onLayout={({ nativeEvent: { layout } }) => {
         heightRef.current = layout.height;
       }}

apps/docs/pages/components/_meta.json

@@ -1,4 +1,6 @@
 {
+  "introduction": "Introduction",
+  "installation": "Installation",
   "layout": {
     "title": "Layout"
   },

apps/docs/pages/components/installation.mdx

@@ -0,0 +1,27 @@
+import { Tabs } from 'components/Tabs';
+
+# Installation
+
+<Tabs items={["pnpm", "npm", "yarn"]}>
+  <Tabs.Tab>
+
+    ```sh
+    pnpm i @crossed/ui
+    ```
+
+  </Tabs.Tab>
+  <Tabs.Tab>
+
+    ```sh
+    npm i @crossed/ui
+    ```
+
+  </Tabs.Tab>
+  <Tabs.Tab>
+
+    ```sh
+    yarn add @crossed/ui
+    ```
+
+  </Tabs.Tab>
+</Tabs>

apps/docs/pages/components/introduction.mdx

@@ -0,0 +1 @@
+# Introduction

apps/docs/pages/index.mdx

@@ -1,15 +1,15 @@
-import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { Button, XBox } from '@crossed/ui';
+import { Button, XBox, Text, YBox, Box, Heading } from '@crossed/ui';
 import { UilArrowRight, UilGithub } from '@crossed/unicons';
 import { useConfig } from 'nextra-theme-docs'
+import { Link } from "next/link"
 
 export default function LandingPage() {
   const router = useRouter();
   const config = useConfig();
   return (
     <>
-        <div className="flex flex-col items-center gap-2 bg-brand-800 py-20 px-5">
+        <YBox className="items-center gap-2 bg-brand-800 py-20 px-5 border-b border-neutral-800">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             version="1.1"
@@ -21,12 +21,12 @@ export default function LandingPage() {
               <path d="M5 70.48l19.108-19.108a2.029 2.029 0 0 0 0-2.87L5.058 29.45l7.545-7.546 21.89 21.89a8.685 8.685 0 0 1 0 12.283L12.659 77.912 5 70.48zm90-41.03L75.892 48.559a2.029 2.029 0 0 0 0 2.87l19.05 19.051-7.545 7.546-21.89-21.89a8.685 8.685 0 0 1 0-12.283l21.834-21.834L95 29.45zM29.428 5l19.108 19.108a2.029 2.029 0 0 0 2.87 0l19.052-19.05 7.546 7.545-21.89 21.89a8.685 8.685 0 0 1-12.283 0L21.997 12.659 29.428 5zm41.144 90L51.463 75.892a2.029 2.029 0 0 0-2.87 0l-19.051 19.05-7.546-7.545 21.89-21.89a8.685 8.685 0 0 1 12.283 0l21.834 21.834L70.572 95z"></path>
             </g>
           </svg>
-          <h1 className="text-6xl mb-5">crossed UI</h1>
+          <h1 className="text-6xl mb-5">crossed</h1>
           <h2 className="border-0 text-2xl text-center mb-10">
             Universal Headless Components built with tailwindcss for{" "}
             <b>react-native</b> + <b>web</b>
           </h2>
-          <XBox space="md">
+          <XBox space="md" className="justify-center">
             <Button
               text="Get started"
               variant="filled"
@@ -47,25 +47,31 @@ export default function LandingPage() {
               target="_blank"
             />
           </XBox>
-        </div>
-        <div className="w-1/2 mx-auto">
-          <h3>Introduction</h3>
-
-          <p>
-            Crossed is UI lib component which worked on react-native and web based on <a href="https://tailwindcss.com/" title="tailwindcss" target="_blank">tailwindcss</a>.
-            </p><p>
-            Crossed transform className in style for native, and use power of css for web.
-            </p>
-
-          <h3>Packages</h3>
-
-          <ul>
-            <li>@crossed/core</li>
-            <li>- @crossed/ui</li>
-            <li>- @crossed/unicons ([unicons](https://iconscout.com/unicons))</li>
-          </ul>
-        </div>
+        </YBox>
+
+        <YBox className="w-1/2 mx-auto py-5" space="md">
+          <Heading order={3} className="text-lg self-center">Cross platform ecosystem</Heading>
+          <XBox className="justify-center" space="md">
+            <YBox space="sm" className="bg-brand-900 p-5 rounded-md border border-neutral-800 flex-1" as={Link} href="/styled/installation">
+              <Heading order={4} className="text-lg self-center text-center">@crossed/styled</Heading>
+              <Text className="text-center">
+                Styled you component with tailwindcss
+              </Text>
+            </YBox>
+            <YBox space="sm" className="bg-brand-900 p-5 rounded-md border border-neutral-800 flex-1" as={Link} href="/primitive/installation">
+              <Heading order={4} className="text-lg self-center text-center">@crossed/primitive</Heading>
+              <Text className="text-center">
+                Create your accessible component from anything
+              </Text>
+            </YBox>
+            <YBox space="sm" className="bg-brand-900 p-5 rounded-md border border-neutral-800 flex-1" as={Link} href="/components/installation">
+              <Heading order={4} className="text-lg self-center text-center">@crossed/ui</Heading>
+              <Text className="text-center">
+                Component lib made with @crossed/primitive and @crossed/styled
+              </Text>
+            </YBox>
+          </XBox>
+        </YBox>
     </>
-
-);
+  );
 }

apps/docs/pages/primitive/_meta.json

@@ -2,6 +2,7 @@
   "introduction": {
     "title": "Intoduction"
   },
+  "installation": "Installation",
   "createButton": {
     "title": "createButton"
   }

apps/docs/pages/primitive/installation.mdx

@@ -0,0 +1,27 @@
+import { Tabs } from 'components/Tabs';
+
+# Installation
+
+<Tabs items={["pnpm", "npm", "yarn"]}>
+  <Tabs.Tab>
+
+    ```sh
+    pnpm i @crossed/primitive
+    ```
+
+  </Tabs.Tab>
+  <Tabs.Tab>
+
+    ```sh
+    npm i @crossed/primitive
+    ```
+
+  </Tabs.Tab>
+  <Tabs.Tab>
+
+    ```sh
+    yarn add @crossed/primitive
+    ```
+
+  </Tabs.Tab>
+</Tabs>

apps/docs/pages/styled/_meta.json

@@ -1,4 +1,5 @@
 {
+  "introduction": "Introduction",
   "installation": "Installation",
   "styled": "styled()"
 }

apps/docs/pages/styled/installation.mdx

@@ -1,7 +1,26 @@
 import { Tabs } from 'components/Tabs';
+import { styled } from '@crossed/core';
+import { Box } from '@crossed/ui';
+
+export const Button = styled("button", {
+  className: ['border border-brand-900 bg-brand-500 rounded-md text-white'],
+  ':hover': { className: "bg-brand-400" },
+  ':active': { className: "bg-brand-600" },
+  variants: {
+    size: {
+      md: { className: ["px-3 py-2"] }
+    },
+  },
+  defaultVariants:{
+    size:"md"
+  }
+});
 
 # Installation
 
+Based you already have tailwind initilized. If not, see how [install tailwind](https://tailwindcss.com/docs/installation)
+
+## Install dependencies
 <Tabs items={["pnpm", "npm", "yarn"]}>
   <Tabs.Tab>
 
@@ -25,3 +44,42 @@ import { Tabs } from 'components/Tabs';
 
   </Tabs.Tab>
 </Tabs>
+
+## Add postcss plugin
+
+```javascript filename="postcss.config.js"
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    // ...,
+    '@crossed/core/postcss': {},
+    // ...,
+};
+
+module.exports = config;
+```
+
+## Usage
+<br />
+<Box className="items-center justify-center">
+  <Button>Hello</Button>
+</Box>
+
+```typescript
+import { styled } from '@crossed/core';
+
+export const Button = styled("button", {
+  className: ['border border-brand-900 bg-brand-500 rounded-md text-white'],
+  ':hover': { className: "bg-brand-400" },
+  ':active': { className: "bg-brand-600" },
+  variants: {
+    size: {
+      md: { className: ["px-3 py-2"] }
+    },
+  },
+  defaultVariants:{
+    size:"md"
+  }
+});
+
+```

apps/docs/pages/styled/introduction.mdx

@@ -0,0 +1,6 @@
+# Introduction
+
+Tailwindcss is powerfull system.  
+Based on [twrnc](https://github.com/jaredh159/tailwind-react-native-classnames)
+
+Why create an other lib which ask to learn new theme design ? just use tailwindcss

apps/docs/pages/styled/styled.mdx

@@ -1,66 +1,60 @@
-import { StyledDemo } from '@crossed/demo';
+import { StyledDemo, StyledHtmlDemo } from '@crossed/demo';
 import { CodeDemo } from 'components/CodeDemo';
 import { getStaticDemo } from 'components/getStaticDemo';
 import { Tabs } from 'components/Tabs';
 
-export const getStaticProps = getStaticDemo('core/styled');
+export const getStaticProps = async (e) => {
+  return {
+    props: {
+      ssg: {
+        native: (await getStaticDemo('core/styled-html'))(e).props.ssg.code,
+        html: (await getStaticDemo('core/styled'))(e).props.ssg.code,
+      },
+    },
+  };
+};
 
 # styled()
 
-
 <Tabs items={["Demo", "Anatomy", "Props"]}>
   <Tabs.Tab>
-    <CodeDemo Demo={StyledDemo} />
+    ## React web
+    <br />
+    <CodeDemo Demo={StyledHtmlDemo} name="html" />
+    ## React native
+    <br />
+    <CodeDemo Demo={StyledDemo} name="native" />
   </Tabs.Tab>
   <Tabs.Tab>
   ```typescript
-  type ClassName = "..." | ["..."];
-
-  type Props = ComponentProps
-
-  type Base<P> = {
-    className: ClassName;
-    props: P,
-  }
+styled(Component, {
+  'className': string[],
+  'props': Props,
+  ":focus": Base<ComponentProps>;
+  ":hover": Base<ComponentProps>;
+  ":disabled": Base<ComponentProps>;
+  ":active": Base<ComponentProps>;
+  'variants': {
+    size: {
+      xs: {
+        'className': ClassName,
+        'props': Props,
+        ":focus": Base<ComponentProps>;
+        ":hover": Base<ComponentProps>;
+        ":disabled": Base<ComponentProps>;
+        ":active": Base<ComponentProps>;
+      },
+    },
+  },
+  'defaultVariants': {
+    size: 'md',
+  },
+});
 
-  type State<P> = {
-    ":focus": Base<P>;
-    ":hover": Base<P>;
-    ":disabled": Base<P>;
-    ":active": Base<P>;
-  }
+```  
 
-  type BaseWithState<P> = State<P> & {
-    className: ClassName;
-    props: P,
-    ":hover": Base<P>,
-  }
 
-  styled(Component, {
-    'className': ClassName,
-    'props': Props,
-    ":focus": Base<ComponentProps>;
-    ":hover": Base<ComponentProps>;
-    ":disabled": Base<ComponentProps>;
-    ":active": Base<ComponentProps>;
-    'variants': {
-      size: {
-        xs: {
-          'className': ClassName,
-          'props': Props,
-          ":focus": Base<ComponentProps>;
-          ":hover": Base<ComponentProps>;
-          ":disabled": Base<ComponentProps>;
-          ":active": Base<ComponentProps>;
-        },
-      },
-    },
-    'defaultVariants': {
-      size: 'md',
-    },
-  });
-  ```
-  </Tabs.Tab>
-  <Tabs.Tab>
-  </Tabs.Tab>
-  </Tabs>
+</Tabs.Tab>
+<Tabs.Tab>
+</Tabs.Tab>
+</Tabs>

apps/docs/theme.config.tsx

@@ -19,7 +19,7 @@ const config: DocsThemeConfig = {
           <path d="M5 70.48l19.108-19.108a2.029 2.029 0 0 0 0-2.87L5.058 29.45l7.545-7.546 21.89 21.89a8.685 8.685 0 0 1 0 12.283L12.659 77.912 5 70.48zm90-41.03L75.892 48.559a2.029 2.029 0 0 0 0 2.87l19.05 19.051-7.545 7.546-21.89-21.89a8.685 8.685 0 0 1 0-12.283l21.834-21.834L95 29.45zM29.428 5l19.108 19.108a2.029 2.029 0 0 0 2.87 0l19.052-19.05 7.546 7.545-21.89 21.89a8.685 8.685 0 0 1-12.283 0L21.997 12.659 29.428 5zm41.144 90L51.463 75.892a2.029 2.029 0 0 0-2.87 0l-19.051 19.05-7.546-7.545 21.89-21.89a8.685 8.685 0 0 1 12.283 0l21.834 21.834L70.572 95z"></path>
         </g>
       </svg>
-      crossed UI
+      crossed
     </span>
   ),
   project: {