⭐ feat(www): Finish up on the onboarding (#202)

## Description
This is an attempt to finish up on the onboarding and creating a team

## Type of Change

- [ ] Bug fix (non-breaking change)
- [x] New feature (non-breaking change)
- [ ] Breaking change (fix or feature that changes existing
functionality)
- [ ] Documentation update
- [ ] Other (please describe):

## Checklist

- [ ] I have updated relevant documentation
- [x] My code follows the project's coding style
- [x] My changes generate no new warnings/errors

packages/core/src/examples.ts

@@ -1,4 +1,3 @@
-import { teamID } from "./drizzle/types";
 import { prefixes } from "./utils";
 export module Examples {
     export const Id = (prefix: keyof typeof prefixes) =>
@@ -26,4 +25,9 @@ export module Examples {
         timeSeen: new Date("2025-02-23T13:39:52.249Z"),
     }
 
+    export const Polar = {
+        teamID: Id("team"),
+        timeSeen: new Date("2025-02-23T13:39:52.249Z"),
+    }
+
 }

packages/core/src/polar.ts

@@ -1,8 +0,0 @@
-import { Resource } from "sst";
-import { Polar as PolarSdk } from "@polar-sh/sdk";
-
-const polar = new PolarSdk({ accessToken: Resource.PolarSecret.value, server: Resource.App.stage !== "production" ? "sandbox" : "production" });
-
-export module Polar {
-    export const client = polar;
-}

packages/core/src/polar/index.ts

@@ -0,0 +1,169 @@
+import { z } from "zod";
+import { fn } from "../utils";
+import { Resource } from "sst";
+import { eq, and } from "../drizzle";
+import { useTeam } from "../actor";
+import { createEvent } from "../event";
+import { polarTable, Standing } from "./polar.sql";
+import { Polar as PolarSdk } from "@polar-sh/sdk";
+import { useTransaction } from "../drizzle/transaction";
+
+const polar = new PolarSdk({ accessToken: Resource.PolarSecret.value, server: Resource.App.stage !== "production" ? "sandbox" : "production" });
+
+export module Polar {
+    export const client = polar;
+
+    export const Info = z.object({
+        teamID: z.string(),
+        customerID: z.string(),
+        subscriptionID: z.string().nullable(),
+        subscriptionItemID: z.string().nullable(),
+        standing: z.enum(Standing),
+    });
+
+    export type Info = z.infer<typeof Info>;
+
+    export const Checkout = z.object({
+        annual: z.boolean().optional(),
+        successUrl: z.string(),
+        cancelUrl: z.string(),
+    });
+
+    export const CheckoutSession = z.object({
+        url: z.string().nullable(),
+    });
+
+    export const CustomerSubscriptionEventType = [
+        "created",
+        "updated",
+        "deleted",
+    ] as const;
+
+    export const Events = {
+        CustomerSubscriptionEvent: createEvent(
+            "polar.customer-subscription-event",
+            z.object({
+                type: z.enum(CustomerSubscriptionEventType),
+                status: z.string(),
+                teamID: z.string().min(1),
+                customerID: z.string().min(1),
+                subscriptionID: z.string().min(1),
+                subscriptionItemID: z.string().min(1),
+            }),
+        ),
+    };
+
+    export function get() {
+        return useTransaction(async (tx) =>
+            tx
+                .select()
+                .from(polarTable)
+                .where(eq(polarTable.teamID, useTeam()))
+                .execute()
+                .then((rows) => rows.map(serialize).at(0)),
+        );
+    }
+
+    export const fromUserEmail = fn(z.string().min(1), async (email) => {
+        try {
+            const customers = await client.customers.list({ email })
+
+            if (customers.result.items.length === 0) {
+                return await client.customers.create({ email })
+            } else {
+                return customers.result.items[0]
+            }
+
+        } catch (err) {
+            //FIXME: This is the issue [Polar.sh/#5147](https://github.com/polarsource/polar/issues/5147)
+            // console.log("error", err)
+            return undefined
+        }
+    })
+
+    export const setCustomerID = fn(Info.shape.customerID, async (customerID) =>
+        useTransaction(async (tx) =>
+            tx
+                .insert(polarTable)
+                .values({
+                    teamID: useTeam(),
+                    customerID,
+                    standing: "new",
+                })
+                .execute(),
+        ),
+    );
+
+    export const setSubscription = fn(
+        Info.pick({
+            subscriptionID: true,
+            subscriptionItemID: true,
+        }),
+        (input) =>
+            useTransaction(async (tx) =>
+                tx
+                    .update(polarTable)
+                    .set({
+                        subscriptionID: input.subscriptionID,
+                        subscriptionItemID: input.subscriptionItemID,
+                    })
+                    .where(eq(polarTable.teamID, useTeam()))
+                    .returning()
+                    .execute()
+                    .then((rows) => rows.map(serialize).at(0)),
+            ),
+    );
+
+    export const removeSubscription = fn(
+        z.string().min(1),
+        (stripeSubscriptionID) =>
+            useTransaction((tx) =>
+                tx
+                    .update(polarTable)
+                    .set({
+                        subscriptionItemID: null,
+                        subscriptionID: null,
+                    })
+                    .where(and(eq(polarTable.subscriptionID, stripeSubscriptionID)))
+                    .execute(),
+            ),
+    );
+
+    export const setStanding = fn(
+        Info.pick({
+            subscriptionID: true,
+            standing: true,
+        }),
+        (input) =>
+            useTransaction((tx) =>
+                tx
+                    .update(polarTable)
+                    .set({ standing: input.standing })
+                    .where(and(eq(polarTable.subscriptionID, input.subscriptionID!)))
+                    .execute(),
+            ),
+    );
+
+    export const fromCustomerID = fn(Info.shape.customerID, (customerID) =>
+        useTransaction((tx) =>
+            tx
+                .select()
+                .from(polarTable)
+                .where(and(eq(polarTable.customerID, customerID)))
+                .execute()
+                .then((rows) => rows.map(serialize).at(0)),
+        ),
+    );
+
+    function serialize(
+        input: typeof polarTable.$inferSelect,
+    ): z.infer<typeof Info> {
+        return {
+            teamID: input.teamID,
+            customerID: input.customerID,
+            subscriptionID: input.subscriptionID,
+            subscriptionItemID: input.subscriptionItemID,
+            standing: input.standing,
+        };
+    }
+}

packages/core/src/polar/polar.sql.ts

@@ -0,0 +1,22 @@
+import { timestamps, teamID } from "../drizzle/types";
+import { teamIndexes, teamTable } from "../team/team.sql";
+import { pgTable, text, varchar } from "drizzle-orm/pg-core";
+
+export const Standing = ["new", "good", "overdue"] as const;
+
+export const polarTable = pgTable(
+    "polar",
+    {
+        teamID: teamID.teamID.primaryKey().references(() => teamTable.id),
+        ...timestamps,
+        customerID: varchar("customer_id", { length: 255 }).notNull(),
+        subscriptionID: varchar("subscription_id", { length: 255 }),
+        subscriptionItemID: varchar("subscription_item_id", {
+            length: 255,
+        }),
+        standing: text("standing", { enum: Standing }).notNull(),
+    },
+    (table) => ({
+        ...teamIndexes(table),
+    })
+)

packages/core/src/team/index.ts

@@ -3,13 +3,13 @@ import { Resource } from "sst";
 import { bus } from "sst/aws/bus";
 import { Common } from "../common";
 import { createID, fn } from "../utils";
-import { VisibleError } from "../error";
 import { Examples } from "../examples";
 import { teamTable } from "./team.sql";
 import { createEvent } from "../event";
-import { assertActor } from "../actor";
+import { assertActor, withActor } from "../actor";
 import { and, eq, sql } from "../drizzle";
 import { memberTable } from "../member/member.sql";
+import { HTTPException } from 'hono/http-exception';
 import { afterTx, createTransaction, useTransaction } from "../drizzle/transaction";
 
 export module Team {
@@ -45,11 +45,11 @@ export module Team {
         ),
     };
 
-    export class WorkspaceExistsError extends VisibleError {
+    export class TeamExistsError extends HTTPException {
         constructor(slug: string) {
             super(
-                "team.slug_exists",
+                400,
-                `there is already a workspace named "${slug}"`,
+                { message: `There is already a team named "${slug}"`, }
             );
         }
     }
@@ -65,15 +65,16 @@ export module Team {
                     slug: input.slug,
                     name: input.name
                 })
-                    .onConflictDoNothing()
+                    .onConflictDoNothing({ target: teamTable.slug })
-                    .returning({ insertedID: teamTable.id })
 
-                if (result.length === 0) throw new WorkspaceExistsError(input.slug);
+                if (!result.rowCount) throw new TeamExistsError(input.slug);
 
                 await afterTx(() =>
+                    withActor({ type: "system", properties: { teamID: id } }, () =>
                         bus.publish(Resource.Bus, Events.Created, {
                             teamID: id,
-                    }),
+                        })
+                    ),
                 );
                 return id;
             })

packages/core/src/user/index.ts

@@ -1,4 +1,6 @@
 import { z } from "zod";
+import { Polar } from "../polar";
+import { Team } from "../team";
 import { bus } from "sst/aws/bus";
 import { Common } from "../common";
 import { createID, fn } from "../utils";
@@ -11,7 +13,6 @@ import { assertActor, withActor } from "../actor";
 import { memberTable } from "../member/member.sql";
 import { and, eq, isNull, asc, getTableColumns, sql } from "../drizzle";
 import { afterTx, createTransaction, useTransaction } from "../drizzle/transaction";
-import { Team } from "../team";
 
 
 export module User {
@@ -106,12 +107,8 @@ export module User {
 
         //FIXME: Do this much later, as Polar.sh has so many inconsistencies for fuck's sake
 
-        // const customer = await Polar.client.customers.create({
+        const customer = await Polar.fromUserEmail(input.email)
-        //     email: input.email,
+        console.log("customer", customer)
-        //     metadata: {
-        //         userID,
-        //     },
-        // });
 
         const name = sanitizeUsername(input.name);
 
@@ -131,6 +128,7 @@ export module User {
                 avatarUrl: input.avatarUrl,
                 email: input.email,
                 discriminator: Number(discriminator),
+                polarCustomerID: customer?.id
             })
             await afterTx(() =>
                 withActor({

packages/functions/src/api/account.ts

@@ -42,8 +42,10 @@ export module AccountApi {
             }),
             async (c) => {
                 const actor = assertActor("user");
-                const currentUser = await User.fromID(actor.properties.userID)
+                const [currentUser, teams] = await Promise.all([User.fromID(actor.properties.userID), User.teams()])
-                if (!currentUser) return c.json({ error: "This account does not exist, it may have been deleted" }, 404)
+
+                if (!currentUser) return c.json({ error: "This account does not exist; it may have been deleted" }, 404)
+
                 const { id, email, name, polarCustomerID, avatarUrl, discriminator } = currentUser
 
                 return c.json({
@@ -51,10 +53,10 @@ export module AccountApi {
                         id,
                         email,
                         name,
+                        teams,
                         avatarUrl,
                         discriminator,
                         polarCustomerID,
-                        teams: await User.teams(),
                     }
                 }, 200);
             },

packages/www/index.html

@@ -9,12 +9,12 @@
     <meta
       name="theme-color"
       media="(prefers-color-scheme: light)"
-      content="hsla(0,0%,98%)"
+      content="#f5f5f5"
     />
     <meta
       name="theme-color"
       media="(prefers-color-scheme: dark)"
-      content="hsla(0,0%,0%)"
+      content="#171717"
     />
     <link
       rel="apple-touch-icon"

packages/www/package.json

@@ -19,14 +19,17 @@
   },
   "dependencies": {
     "@fontsource-variable/geist-mono": "^5.0.1",
-    "@nestri/core": "*",
     "@fontsource-variable/mona-sans": "^5.0.1",
     "@fontsource/geist-sans": "^5.1.0",
     "@macaron-css/core": "^1.5.2",
     "@macaron-css/solid": "^1.5.3",
+    "@modular-forms/solid": "^0.25.1",
+    "@nestri/core": "*",
     "@solid-primitives/storage": "^4.3.1",
     "@solidjs/router": "^0.15.3",
     "modern-normalize": "^3.0.1",
-    "solid-js": "^1.9.5"
+    "solid-js": "^1.9.5",
+    "valibot": "^1.0.0-rc.3",
+    "zod": "^3.24.2"
   }
 }

packages/www/src/App.tsx

@@ -6,9 +6,9 @@ import '@fontsource/geist-sans/600.css';
 import '@fontsource/geist-sans/700.css';
 import '@fontsource/geist-sans/800.css';
 import '@fontsource/geist-sans/900.css';
-import { TeamCreate } from './pages/new';
 import { styled } from "@macaron-css/solid";
 import { useStorage } from './providers/account';
+import { CreateTeamComponent } from './pages/new';
 import { darkClass, lightClass, theme } from './ui/theme';
 import { AuthProvider, useAuth } from './providers/auth';
 import { Navigate, Route, Router } from "@solidjs/router";
@@ -34,10 +34,10 @@ globalStyle("html", {
     // Hardcode colors
     "@media": {
         "(prefers-color-scheme: light)": {
-            backgroundColor: "hsla(0,0%,98%)",
+            backgroundColor: "#f5f5f5",
         },
         "(prefers-color-scheme: dark)": {
-            backgroundColor: "hsla(0,0%,0%)",
+            backgroundColor: "#1e1e1e",
         },
     },
 });
@@ -87,35 +87,13 @@ export const App: Component = () => {
                 <Route
                     path="*"
                     component={(props) => (
-                        <AuthProvider>
+                        // <AuthProvider>
-                            {props.children}
-                        </AuthProvider>
-                        // <CommandBar>
-                        //         <ReplicacheStatusProvider>
-                        //             <DummyProvider>
-                        //                 <DummyConfigProvider>
-                        //                     <FlagsProvider>
-                        //                         <RealtimeProvider />
-                        //                         <LocalProvider>
-                        //                             <LocalLogsProvider>
-                        //                                 <GlobalCommands />
                             // {props.children}
-                        //                             </LocalLogsProvider>
+                            props.children
-                        //                         </LocalProvider>
-                        //                     </FlagsProvider>
-                        //                 </DummyConfigProvider>
-                        //             </DummyProvider>
-                        //         </ReplicacheStatusProvider>
                         // </AuthProvider>
-                        // </CommandBar>
                     )}
                 >
-                    {/* <Route path="local" component={Local} />
+                    <Route path="new" component={CreateTeamComponent} />
-                        <Route path="debug" component={DebugRoute} />
-                        <Route path="design" component={Design} />
-                        <Route path="workspace" component={WorkspaceCreate} />
-                        <Route path=":workspaceSlug">{WorkspaceRoute}</Route> */}
-                    <Route path="new" component={TeamCreate} />
                     <Route
                         path="/"
                         component={() => {

packages/www/src/pages/default-state.tsx

@@ -1,7 +0,0 @@
-export function DefaultState() {
-    return (
-        <div>
-            We are logging you in
-        </div>
-    )
-}

packages/www/src/pages/new.tsx

@@ -1,15 +1,124 @@
+import * as v from "valibot"
+import { styled } from "@macaron-css/solid";
 import { Text } from "@nestri/www/ui/text";
+import { utility } from "@nestri/www/ui/utility";
+import { theme } from "@nestri/www/ui/theme";
+import { FormField, Input, Select } from "@nestri/www/ui/form";
 import { Container, FullScreen } from "@nestri/www/ui/layout";
+import { createForm, required, email, valiForm } from "@modular-forms/solid";
+import { Button } from "@nestri/www/ui";
+
+// const nameRegex = /^[a-z]+$/
+
+const FieldList = styled("div", {
+    base: {
+        width: "100%",
+        maxWidth: 380,
+        ...utility.stack(5),
+    },
+});
+
+const Hr = styled("hr", {
+    base: {
+        border: 0,
+        backgroundColor: theme.color.gray.d400,
+        width: "100%",
+        height: 1,
+    }
+})
+
+const Plan = {
+    Pro: 'Pro',
+    Basic: 'Basic',
+} as const;
+
+const schema = v.object({
+    plan: v.pipe(
+        v.enum(Plan),
+    ),
+    display_name: v.pipe(
+        v.string(),
+        v.maxLength(32, 'Please use 32 characters at maximum.'),
+    ),
+    slug: v.pipe(
+        v.string(),
+        v.minLength(2, 'Please use 2 characters at minimum.'),
+        // v.regex(nameRegex, "Use only small letters, no numbers or special characters"),
+        v.maxLength(48, 'Please use 48 characters at maximum.'),
+    )
+})
+
+export function CreateTeamComponent() {
+    const [form, { Form, Field }] = createForm({
+        validate: valiForm(schema),
+    });
 
-export function TeamCreate() {
     return (
         <FullScreen>
-            <Container flow="column" >
+            <Container horizontal="center" style={{ width: "100%", padding: "1rem", }} space="1" >
-                <Text align="center" spacing="lg" size="4xl" weight="semibold">
+                <Container style={{ "width": "100%","max-width": "380px" }} horizontal="start" space="3" >
-                    Your first deploy is just a sign-up away.
+                    <Text font="heading" spacing="none" size="3xl" weight="semibold">
+                        Create a Team
                     </Text>
-                
+                    <Text style={{ color: theme.color.gray.d900 }} size="sm">
+                        Choose something that your teammates will recognize
+                    </Text>
+                    <Hr />
                 </Container>
+                <Form style={{ width: "100%", "max-width": "380px" }}>
+                    <FieldList>
+                        <Field type="string" name="slug">
+                            {(field, props) => (
+                                <FormField
+                                    label="Team Name"
+                                    hint={
+                                        field.error
+                                        && field.error
+                                        // : "Needs to be lowercase, unique, and URL friendly."
+                                    }
+                                    color={field.error ? "danger" : "primary"}
+                                >
+                                    <Input
+                                        {...props}
+                                        autofocus
+                                        placeholder="Jane Doe's Team"
+                                    />
+                                </FormField>
+                            )}
+                        </Field>
+                        <Field type="string" name="plan">
+                            {(field, props) => (
+                                <FormField
+                                    label="Plan Type"
+                                    hint={
+                                        field.error
+                                        && field.error
+                                        // : "Needs to be lowercase, unique, and URL friendly."
+                                    }
+                                    color={field.error ? "danger" : "primary"}
+                                >
+                                    <Select
+                                        {...props}
+                                        value={field.value}
+                                        badges={[
+                                            { label: "Basic", color: "gray" },
+                                            { label: "Pro", color: "blue" }
+                                        ]}
+                                        options={[
+                                            { label: "I'll be playing all by myself", value: 'Basic' },
+                                            { label: "I'll be playing with friends and family", value: 'Pro' },
+                                        ]}
+                                    />
+                                </FormField>
+                            )}
+                        </Field>
+                        <Button color="brand">
+                            Continue
+                        </Button>
+                    </FieldList>
+                </Form>
+            </Container>
+
         </FullScreen>
     )
 }

packages/www/src/providers/auth.ts

@@ -23,6 +23,8 @@ interface Storage {
   current?: string;
 }
 
+//TODO: Fix bug where authenticator deletes auth state for no reason
+
 export const client = createClient({
   issuer: import.meta.env.VITE_AUTH_URL,
   clientID: "web",
@@ -83,6 +85,7 @@ export const { use: useAuth, provider: AuthProvider } =
           access: account.access,
         })
         if (result.err) {
+          console.log("error", result.err)
           if ("id" in account)
             setStore(produce((state) => {
               delete state.accounts[account.id];
@@ -98,7 +101,7 @@ export const { use: useAuth, provider: AuthProvider } =
             authorization: `Bearer ${tokens.access}`,
           },
         }).then(async (response) => {
-          await new Promise((resolve) => setTimeout(resolve, 5000));
+          await new Promise((resolve) => setTimeout(resolve, 10000));
 
           if (response.ok) {
             const result = await response.json();
@@ -115,6 +118,7 @@ export const { use: useAuth, provider: AuthProvider } =
           }
 
           if (!response.ok)
+            console.log("error from account", response.json())
             setStore(
               produce((state) => {
                 delete state.accounts[account.id];

packages/www/src/ui/button.ts

@@ -0,0 +1,34 @@
+import { theme } from "./theme";
+import { styled } from "@macaron-css/solid";
+
+export const Button = styled("button", {
+    base: {
+        borderRadius: 6,
+        border: "1px solid transparent",
+        padding: `${theme.space[2]} ${theme.space[4]}`,
+        fontWeight: 500,
+        letterSpacing: 0.1,
+        lineHeight: "normal",
+        fontFamily: theme.font.family.heading,
+        textAlign: "center",
+        transitionDelay: "0s, 0s",
+        transitionDuration: "0.2s, 0.2s",
+        transitionProperty: "background-color, border",
+        transitionTimingFunction: "ease-out, ease-out",
+        display: "inline-flex",
+        gap: theme.space[1.5],
+        alignItems: "center",
+        justifyContent: "center",
+        ":disabled": {
+            pointerEvents: "none",
+        },
+    },
+    variants: {
+        color: {
+            brand: {
+                backgroundColor: theme.color.brand,
+                color: "#FFF",
+            }
+        }
+    }
+})

packages/www/src/ui/form.tsx

@@ -0,0 +1,310 @@
+import { theme } from "./theme";
+import { styled } from "@macaron-css/solid"
+import { CSSProperties } from "@macaron-css/core";
+import { ComponentProps, createMemo, For, JSX, Show, splitProps } from "solid-js";
+import { Container } from "./layout";
+import { utility } from "./utility";
+
+export const inputStyles: CSSProperties = {
+    lineHeight: theme.font.lineHeight,
+    appearance: "none",
+    fontSize: theme.font.size.sm,
+    borderRadius: theme.borderRadius,
+    padding: `0 ${theme.space[3]}`,
+    height: theme.input.size.base,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: theme.color.gray.d400,
+    color: theme.color.d1000.gray,
+    backgroundColor: theme.color.background.d100,
+    // transition: `box-shadow ${theme.colorFadeDuration}`,
+    // boxShadow: `
+    //   0 0 0 1px inset ${theme.color.input.border},
+    //   ${theme.color.input.shadow}
+    // `,
+};
+
+export const inputDisabledStyles: CSSProperties = {
+    opacity: 0.5,
+    backgroundColor: theme.color.background.d200,
+    color: theme.color.gray.d400,
+    cursor: "default",
+    // boxShadow: `0 0 0 1px inset ${theme.color.input.border}`,
+};
+
+export const inputFocusStyles: CSSProperties = {
+    outlineOffset: 3,
+    outline: `${theme.color.gray.d600} solid 2px`,
+};
+
+export const inputDangerTextStyles: CSSProperties = {
+    color: theme.color.red.d700,
+};
+
+export const inputDangerFocusStyles: CSSProperties = {
+    ...inputDangerTextStyles,
+    outlineColor: theme.color.red.d700,
+    // boxShadow: `
+    //   0 0 1px 1px inset hsla(${theme.color.red.l2}, 100%),
+    //   ${theme.color.input.shadow}
+    // `,
+};
+
+export const Root = styled("label", {
+    base: {
+        ...utility.stack(2),
+    },
+    variants: {
+        color: {
+            primary: {
+                color: theme.color.gray.d900
+            },
+            danger: {
+                color: theme.color.red.d900
+            },
+        },
+    },
+    defaultVariants: {
+        color: "primary",
+    },
+});
+
+type FormFieldProps = ComponentProps<typeof Root> & {
+    hint?: JSX.Element;
+    label?: string;
+};
+
+export const Input = styled("input", {
+    base: {
+        ...inputStyles,
+        ":focus": {
+            ...inputFocusStyles,
+        },
+        ":disabled": {
+            ...inputDisabledStyles,
+        },
+        "::placeholder": {
+            color: theme.color.gray.d800
+        }
+        // selectors: {
+        // [`${Root.selector({ color: "danger" })} &`]: {
+        //     ...inputDangerFocusStyles,
+        // },
+        // },
+    },
+    variants: {
+        color: {
+            primary: {},
+            danger: {
+                ...inputDangerFocusStyles,
+                ":focus": {
+                    ...inputDangerFocusStyles,
+                },
+            },
+        },
+        size: {
+            sm: {
+                height: theme.input.size.sm,
+            },
+        },
+    },
+    defaultVariants: {
+        color: "primary",
+    },
+});
+
+export const InputRadio = styled("input", {
+    base: {
+        padding: 0,
+        // borderRadius: 0,
+        WebkitAppearance: "none",
+        appearance: "none",
+        /* For iOS < 15 to remove gradient background */
+        backgroundColor: theme.color.background.d100,
+        /* Not removed via appearance */
+        margin: 0,
+        font: "inherit",
+        color: "currentColor",
+        width: "1.15em",
+        height: "1.15em",
+        border: "0.15em solid currentColor",
+        borderRadius: "50%",
+        transform: "translateY(-0.075em)",
+        display: "grid",
+        position: "relative",
+        placeContent: "center",
+        ":before": {
+            content: "",
+            width: "0.68em",
+            height: "0.68em",
+            borderRadius: "50%",
+            transform: " scale(0)",
+            transition: "120ms transform ease-in-out",
+            boxShadow: `inset 1em 1em ${theme.color.blue.d700}`
+        },
+        selectors: {
+            "&:checked::before": {
+                transform: "scale(1)"
+            }
+        }
+    }
+});
+
+const Label = styled("p", {
+    base: {
+        fontWeight: 500,
+        letterSpacing: -0.1,
+        fontSize: theme.font.size.mono_sm,
+        textTransform: "capitalize",
+        fontFamily: theme.font.family.heading,
+    },
+});
+
+const InputLabel = styled("label", {
+    base: {
+        letterSpacing: -0.1,
+        fontSize: theme.font.size.sm,
+        lineHeight: theme.font.lineHeight,
+        height: theme.input.size.base,
+        appearance: "none",
+        padding: `0 ${theme.space[3]}`,
+        borderWidth: 0,
+        borderBottomWidth: 1,
+        borderStyle: "solid",
+        borderColor: theme.color.gray.d400,
+        color: theme.color.gray.d800,
+        backgroundColor: theme.color.background.d100,
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        cursor: "pointer",
+        gap: "1em",
+        ":focus-within": {
+            color: theme.color.d1000.gray
+        },
+        ":first-child": {
+            borderTopRightRadius: theme.borderRadius,
+            borderTopLeftRadius: theme.borderRadius,
+        },
+        ":last-child": {
+            borderBottomWidth: 0,
+            borderBottomRightRadius: theme.borderRadius,
+            borderBottomLeftRadius: theme.borderRadius,
+        },
+        ":hover": {
+            backgroundColor: theme.color.background.d200,
+        },
+        selectors: {
+            "&:has(input:checked)": {
+                color: theme.color.d1000.gray
+            }
+        }
+    },
+});
+
+const Hint = styled("p", {
+    base: {
+        fontSize: theme.font.size.sm,
+        lineHeight: theme.font.lineHeight,
+        color: theme.color.gray.d800,
+    },
+    variants: {
+        color: {
+            primary: {},
+            danger: {
+                color: theme.color.red.d700,
+            },
+        },
+    },
+    defaultVariants: {
+        color: "primary",
+    },
+});
+
+export function FormField(props: FormFieldProps) {
+    return (
+        <Root {...props}>
+            <Container space="2">
+                <Show when={props.label}>
+                    <Label color={props.color}>{props.label}</Label>
+                </Show>
+                {props.children}
+            </Container>
+            <Show when={props.hint}>
+                <Hint color={props.color}>{props.hint!}</Hint>
+            </Show>
+        </Root>
+    );
+}
+
+type SelectProps = {
+    ref: (element: HTMLInputElement) => void;
+    name: string;
+    value: any;
+    onInput: JSX.EventHandler<HTMLInputElement, InputEvent>;
+    onChange: JSX.EventHandler<HTMLInputElement, Event>;
+    onBlur: JSX.EventHandler<HTMLInputElement, FocusEvent>;
+    options: { label: string; value: string }[];
+    badges?: { label: string; color: keyof typeof theme.color.d1000 }[];
+    required?: boolean;
+    class?: string;
+};
+
+const InputRadioContainer = styled("div", {
+    base: {
+        ...inputStyles,
+        display: "flex",
+        flexDirection: "column",
+        height: "auto",
+        position: "relative",
+        padding: 0,
+    }
+})
+
+const Badge = styled("div", {
+    base: {
+        color: "#FFF",
+        marginLeft: "auto",
+        borderRadius: 9999,
+        letterSpacing: 0.5,
+        padding: "0 6px",
+        fontSize: theme.font.size.xs
+    }
+
+})
+
+export function Select(props: SelectProps) {
+    // Split select element props
+    const [, inputProps] = splitProps(props, [
+        'class',
+        'value',
+        'options',
+        'badges',
+    ]);
+
+    return (
+        <InputRadioContainer>
+            <For each={props.options}>
+                {({ label, value }, key) => (
+                    <InputLabel for={label}>
+                        <InputRadio
+                            {...inputProps}
+                            type="radio"
+                            value={value}
+                            id={label}
+                        />
+                        {label}
+                        <Show when={props.badges}>
+                            {props.badges &&
+                                <Badge style={{"background-color": theme.color[props.badges[key()].color].d700 }}>
+                                    {props.badges[key()].label}
+                                </Badge>
+                            }
+                        </Show>
+                    </InputLabel>
+                )}
+            </For>
+
+        </InputRadioContainer >
+    );
+}

packages/www/src/ui/index.ts

@@ -0,0 +1,6 @@
+export * from "./form"
+export * from "./layout"
+export * from "./text"
+export * from "./theme"
+export * from "./utility"
+export * from "./button"

packages/www/src/ui/layout.tsx

@@ -4,7 +4,6 @@ import { styled } from "@macaron-css/solid";
 export const FullScreen = styled("div", {
     base: {
         inset: 0,
-        zIndex: 0,
         display: "flex",
         position: "fixed",
         alignItems: "center",
@@ -21,28 +20,97 @@ export const FullScreen = styled("div", {
     },
 })
 
+// export const Container = styled("div", {
+//     base: {
+//         backgroundColor: theme.color.background.d100,
+//         borderColor: theme.color.gray.d400,
+//         padding: "64px 80px 48px",
+//         justifyContent: "center",
+//         borderStyle: "solid",
+//         position: "relative",
+//         borderRadius: 12,
+//         alignItems: "center",
+//         maxWidth: 550,
+//         borderWidth: 1,
+//         display: "flex",
+//     },
+//     variants: {
+//         flow: {
+//             column: {
+//                 flexDirection: "column"
+//             },
+//             row: {
+//                 flexDirection: "row"
+//             }
+//         }
+//     }
+// })
+
 export const Container = styled("div", {
     base: {
-        backgroundColor: theme.color.background.d100,
-        borderColor: theme.color.gray.d400,
-        padding: "64px 80px 48px",
-        justifyContent: "center",
-        borderStyle: "solid",
-        position: "relative",
-        borderRadius: 12,
-        alignItems: "center",
-        maxWidth: 550,
-        borderWidth: 1,
         display: "flex",
+        flexDirection: "column",
     },
     variants: {
-        flow: {
+        space: (() => {
-            column: {
+            const result = {} as Record<`${keyof (typeof theme)["space"]}`, any>;
-                flexDirection: "column"
+            for (const key in theme.space) {
+                const value = theme.space[key as keyof typeof theme.space];
+                result[key as keyof typeof theme.space] = {
+                    gap: value,
+                };
+            }
+            return result;
+        })(),
+        rounded: (() => {
+            const result = {} as Record<`${keyof (typeof theme)["space"]}`, any>;
+            for (const key in theme.space) {
+                const value = theme.space[key as keyof typeof theme.space];
+                result[key as keyof typeof theme.space] = {
+                    borderRadius: value,
+                };
+            }
+            return result;
+        })(),
+        highlighted: {
+            true: {
+                borderColor: theme.color.gray.d400,
+                backgroundColor: theme.color.background.d100,
+                borderStyle: "solid",
+                borderWidth: 1,
+                padding: "64px 80px 48px",
+                maxWidth: 550,
+            }
         },
-            row: {
+        flex: {
-                flexDirection: "row"
+            true: {
-            }
+                flex: "1 1 auto",
-        }
+            },
-    }
+            false: {
-})
+                flex: "0 0 auto",
+            },
+        },
+        horizontal: {
+            center: {
+                alignItems: "center",
+            },
+            start: {
+                alignItems: "flex-start",
+            },
+            end: {
+                alignItems: "flex-end",
+            },
+        },
+        vertical: {
+            center: {
+                justifyContent: "center",
+            },
+            start: {
+                justifyContent: "flex-start",
+            },
+            end: {
+                justifyContent: "flex-end",
+            },
+        },
+    },
+});

packages/www/src/ui/text.tsx

@@ -4,9 +4,9 @@ import { utility } from "./utility";
 import { CSSProperties } from "@macaron-css/core";
 
 export const Text = styled("span", {
-    base: {
+    // base: {
-        textWrap: "balance"
+    //     textWrap: "balance"
-    },
+    // },
     variants: {
         leading: {
             base: {
@@ -122,6 +122,15 @@ export const Text = styled("span", {
             }
             return result;
         })(),
+        font: (() => {
+            const result = {} as Record<`${keyof typeof theme.font.family}`, any>;
+            for (const [key, value] of Object.entries(theme.font.family)) {
+                result[key as keyof typeof theme.font.family] = {
+                    fontFamily: value,
+                };
+            }
+            return result;
+        })(),
         color: (() => {
             const record = {} as Record<keyof typeof theme.color.text, CSSProperties>;
             for (const [key, _value] of Object.entries(theme.color.text)) {

packages/www/src/ui/theme.ts

@@ -2,7 +2,7 @@ import { createTheme } from "@macaron-css/core";
 
 const constants = {
     colorFadeDuration: "0.15s",
-    borderRadius: "4px",
+    borderRadius: "6px",
     textBoldWeight: "600",
     iconOpacity: "0.85",
     modalWidth: {
@@ -16,6 +16,13 @@ const constants = {
     },
 };
 
+const formInput = {
+    size: {
+      base: "40px",
+      sm: "32px",
+    },
+  };
+
 const space = {
     px: "1px",
     0: "0px",
@@ -96,7 +103,7 @@ const light = (() => {
         d100: 'hsla(0,0%,95%)',
         d200: 'hsla(0,0%,92%)',
         d300: 'hsla(0,0%,90%)',
-        d400: 'hsla(0,0%,92%)',
+        d400: 'hsla(0,0%,82%)',
         d500: 'hsla(0,0%,79%)',
         d600: 'hsla(0,0%,66%)',
         d700: 'hsla(0,0%,56%)',
@@ -206,12 +213,13 @@ const light = (() => {
         teal: "hsla(171,80%,13%)",
         purple: "hsla(276,100%,15)",
         pink: "hsla(333,74%,15%)",
-        grayAlpha: " hsla(0,0%,0%,0.91)"
+        grayAlpha: " hsla(0,0%,0%,0.91)",
     }
+    const brand = "#FF4F01"
 
     const background = {
-        d100: 'hsla(0,0%,100%)',
+        d100: '#f5f5f5',
-        d200: 'hsla(0,0%,98%)'
+        d200: 'oklch(from #f5f5f5 calc(l + (-0.06 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.03)) c h)'
     };
 
     const contrastFg = '#ffffff';
@@ -248,6 +256,7 @@ const light = (() => {
         focusBorder,
         focusColor,
         d1000,
+        brand,
         text
     };
 })()
@@ -365,13 +374,16 @@ const dark = (() => {
         teal: "hsla(166,71%,93%)",
         purple: "hsla(281,73%,96%)",
         pink: "hsla( 333,90%,96%)",
-        grayAlpha: "hsla(0,0%,100%,0.92)"
+        grayAlpha: "hsla(0,0%,100%,0.92)",
     }
 
+    const brand = "#FF4F01"
+
     const background = {
-        d100: 'hsla(0,0%,4%)',
+        d200: '#171717',
-        d200: 'hsla(0,0%,0%)'
+        d100: "oklch(from #171717 calc(l + (-0.06 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.03)) c h)"
     };
+
     const contrastFg = '#ffffff';
     const focusBorder = `0 0 0 1px ${grayAlpha.d600}, 0px 0px 0px 4px rgba(255,255,255,0.24)`;
     const focusColor = blue.d900
@@ -406,7 +418,8 @@ const dark = (() => {
         focusBorder,
         focusColor,
         d1000,
-        text
+        text,
+        brand
     };
 })()
 
@@ -415,6 +428,7 @@ export const [lightClass, theme] = createTheme({
     space,
     font,
     color: light,
+    input: formInput
 });
 
 export const darkClass = createTheme(theme, {
@@ -423,4 +437,5 @@ export const darkClass = createTheme(theme, {
     space,
     font,
     color: dark,
+    input: formInput
 });