bring back example

packages/example/app/Clock.tsx

@@ -0,0 +1,63 @@
+import { styled } from "next-yak";
+import { ReactNode } from "react";
+import { ClockHands } from "./ClockHands";
+
+export const Clock = () => {
+  return (
+    <ClockWrapper>
+      <ClockFace>
+        <ClockCenter />
+        {Array.from({ length: 12 }).map((_, i) => (
+          <ClockNumber key={i} index={i}>
+            {(i + 12) % 12 || 12}
+          </ClockNumber>
+        ))}
+        <ClockHands />
+      </ClockFace>
+    </ClockWrapper>
+  );
+};
+
+const ClockWrapper = styled.div`
+  width: 200px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  margin: 10px auto;
+  perspective: 1000px;
+`;
+const ClockFace = styled.div`
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: relative;
+  transform-style: preserve-3d;
+  transition: transform 2s ease-in-out;
+  &:hover {
+    transform: rotateX(55deg);
+  }
+`;
+const ClockCenter = styled.div`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: black;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  translate: 0 0 40px;
+`;
+const ClockNumber = styled.div<{ index: number; children: ReactNode }>`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform-origin: 50% 100%;
+  color: black;
+  font-size: 14px;
+  text-align: center;
+  width: 20px;
+  transform: translate(-50%, -50%) rotate(${({ index }) => index * 30}deg)
+    translate(0, -88px) rotate(${({ index }) => -index * 30}deg);
+`;

packages/example/app/ClockHands.tsx

@@ -0,0 +1,70 @@
+"use client";
+import { css, styled } from "next-yak";
+import { useEffect, useMemo, useState } from "react";
+
+export const ClockHands = () => {
+  const currentTime = useCurrentTime();
+  if (currentTime === null) return null;
+  return (
+    <>
+      <SecondHand $angle={currentTime.secondsAngle} />
+      <MinuteHand $angle={currentTime.minutesAngle} />
+      <HourHand $angle={currentTime.hoursAngle} />
+    </>
+  );
+};
+
+const useCurrentTime = () => {
+  const [time, setTime] = useState<Date | undefined>();
+  useEffect(() => {
+    const interval = setInterval(() => setTime(new Date()), 1000);
+    return () => clearInterval(interval);
+  }, []);
+  return useMemo(() => {
+    if (!time) return null;
+    const seconds = time.getSeconds();
+    const minutes = time.getMinutes();
+    const hours = time.getHours();
+    return {
+      seconds,
+      minutes,
+      hours,
+      secondsAngle: seconds * 6,
+      minutesAngle: minutes * 6 + seconds * 0.1,
+      hoursAngle: hours * 30 + minutes * 0.5,
+    };
+  }, [time]);
+};
+
+const ClockHand = styled.div<{ $angle: number }>`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform-origin: 50% 100%;
+  transform: translate(-50%, -100%) rotate(${({ $angle }) => $angle}deg);
+`;
+const SecondHand = styled(ClockHand)`
+  width: 2px;
+  height: 45%;
+  translate: 0 0 40px;
+  ${({ theme }) =>
+    theme.highContrast
+      ? css`
+          background: #000;
+        `
+      : css`
+          background: #f00;
+        `};
+`;
+const MinuteHand = styled(ClockHand)`
+  width: 4px;
+  height: 40%;
+  background: black;
+  translate: 0 0 40px;
+`;
+const HourHand = styled(ClockHand)`
+  width: 6px;
+  height: 30%;
+  background: black;
+  translate: 0 0 40px;
+`;

packages/example/app/HighContrastToggle.tsx

@@ -0,0 +1,54 @@
+"use client";
+import { css, styled, useTheme } from "next-yak";
+import { useRouter } from "next/navigation";
+
+const Button = styled.button<{ $primary?: boolean }>`
+  ${({ theme }) =>
+    theme.highContrast
+      ? css`
+          color: #000;
+        `
+      : css`
+          color: #009688;
+        `}
+  background: #fff;
+  border: 1px solid currentColor;
+  font-size: 17px;
+  padding: 7px 12px;
+  font-weight: normal;
+  margin: 6px 0;
+  margin-right: 12px;
+  display: inline-block;
+  font-family: "Open Sans", sans-serif;
+  min-width: 120px;
+  ${({ $primary }) =>
+    $primary &&
+    css`
+      border-width: 2px;
+    `}
+`;
+
+export const HighContrastToggle = () => {
+  const router = useRouter();
+  const theme = useTheme();
+  return (
+    <Button
+      onClick={() => {
+        setCookie("highContrast", theme.highContrast ? "false" : "true");
+        router.refresh();
+      }}
+    >
+      Toggle High Contrast
+    </Button>
+  );
+};
+
+function setCookie(name: string, value: string, days: number = 365) {
+  var expires = "";
+  if (days) {
+    var date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    expires = "; expires=" + date.toUTCString();
+  }
+  document.cookie = name + "=" + (value || "") + expires + "; path=/";
+}

packages/example/app/Input.tsx

@@ -0,0 +1,67 @@
+import { styled } from "next-yak";
+
+const Input = styled.input.attrs<{ $size?: string }>((props) => ({
+  type: "text",
+  $size: props.$size || "1rem",
+}))<{ $size?: string }>`
+  color: #bf4f74;
+  font-size: 1em;
+  border: 2px solid #bf4f74;
+  border-radius: 3px;
+  margin: 1rem;
+
+  padding: ${(props) => props.$size};
+`;
+
+const PasswordInput = styled(Input).attrs({
+  type: "password",
+})`
+  color: #167f8d;
+  border: 2px solid #167f8d;
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: background-color 0.5s ease-in-out;
+  &:has(
+      ${Input}:where(:hover, :focus),
+      ${PasswordInput}:where(:hover, :focus)
+    ) {
+    background-color: #4c4c4cb9;
+  }
+`;
+
+const Headline = styled.h2`
+  color: #bf4f74;
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-align: center;
+
+  background-clip: text;
+  background-image: linear-gradient(
+    149deg,
+    #ae52eb 0%,
+    rgba(253, 29, 29, 1) 50%,
+    rgba(252, 176, 69, 1) 100%
+  );
+  color: #eee;
+  font-size: 2rem;
+  font-weight: bold;
+  padding: calc(1em / 16);
+  -webkit-text-stroke-color: transparent;
+  -webkit-text-stroke-width: calc(1em / 4);
+`;
+
+export const Inputs = () => {
+  return (
+    <Wrapper>
+      <Headline>Styled Inputs</Headline>
+      <Input placeholder="A small text input" />
+      <Input $size="2rem" placeholder="A large text input" />
+      <PasswordInput placeholder="A password input" />
+      <PasswordInput $size="2rem" placeholder="A large password input" />
+    </Wrapper>
+  );
+};

packages/example/app/globals.css

@@ -0,0 +1,26 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  background: #eee;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}

packages/example/app/keyframes/page.tsx

@@ -0,0 +1,23 @@
+import { styled, keyframes } from "next-yak";
+import styles from "../page.module.css";
+
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+  `;
+
+const Headline = styled.h1`
+  animation: ${() => rotate} 3s linear infinite;
+`;
+
+export default function Home() {
+  return (
+    <main className={styles.main}>
+      <Headline>Hello world</Headline>
+    </main>
+  );
+}

packages/example/app/layout.tsx

@@ -1,6 +1,12 @@
-export const metadata = {
-  title: "Next.js",
-  description: "Generated by Next.js",
+import "./globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "CSS in JS POC",
+  description: "Styled Components API with ReactServerComponents",
 };
 
 export default function RootLayout({
@@ -10,7 +16,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body className={inter.className}>{children}</body>
     </html>
   );
 }

packages/example/app/mixins/constants.yak.ts

@@ -0,0 +1,13 @@
+import { mixin } from "next-yak/static";
+
+export const typography = {
+  h1: mixin.css`
+    font-family: "Roboto", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+    ${mixin.css`
+      letter-spacing: 0.00938em;
+    `}
+  `,
+};

packages/example/app/page.module.css

@@ -0,0 +1,8 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6rem;
+  gap: 2rem;
+}