sunpeak 0.2.5 → 0.3.2

package/dist/styles/globals.css

@@ -1,219 +0,0 @@
-@import "tailwindcss";
-
-@custom-variant dark (&:is(.dark *));
-
-/* Tailwind v4 theme configuration */
-@theme {
-  /* ===================================
-   * COLORS - Mapped to shadcn and --sp- variables
-   * ===================================
-   */
-  --color-*: initial;
-
-  /* Shadcn colors */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-border: var(--border);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-
-  /* Sunpeak semantic colors */
-  --color-success: var(--sp-success);
-  --color-warning: var(--sp-warning);
-  --color-error: var(--sp-error);
-  --color-info: var(--sp-info);
-
-  /* ===================================
-   * TYPOGRAPHY - Mapped to --sp- variables
-   * ===================================
-   */
-
-  /* Font families */
-  --font-sans: var(--sp-font-family);
-
-  /* Font sizes */
-  --text-xs: var(--sp-font-size-xs);
-  --text-sm: var(--sp-font-size-sm);
-  --text-base: var(--sp-font-size-base);
-  --text-lg: var(--sp-font-size-lg);
-  --text-xl: var(--sp-font-size-xl);
-
-  /* Font weights */
-  --font-weight-normal: var(--sp-font-weight-normal);
-  --font-weight-medium: var(--sp-font-weight-medium);
-  --font-weight-semibold: var(--sp-font-weight-semibold);
-  --font-weight-bold: var(--sp-font-weight-bold);
-
-  /* Line heights */
-  --leading-tight: var(--sp-line-height-tight);
-  --leading-normal: var(--sp-line-height-normal);
-  --leading-relaxed: var(--sp-line-height-relaxed);
-
-  /* ===================================
-   * SPACING - Mapped to --sp- variables
-   * ===================================
-   */
-  --spacing-1: var(--sp-spacing-1);
-  --spacing-2: var(--sp-spacing-2);
-  --spacing-3: var(--sp-spacing-3);
-  --spacing-4: var(--sp-spacing-4);
-  --spacing-5: var(--sp-spacing-5);
-  --spacing-6: var(--sp-spacing-6);
-  --spacing-8: var(--sp-spacing-8);
-
-  /* ===================================
-   * BORDER RADIUS - Mapped to --sp- variables
-   * ===================================
-   */
-  --radius-sm: var(--sp-radius-sm);
-  --radius-md: var(--sp-radius-md);
-  --radius-lg: var(--sp-radius-lg);
-  --radius-xl: var(--sp-radius-xl);
-  --radius-2xl: var(--sp-radius-2xl);
-  --radius-full: var(--sp-radius-full);
-
-  /* ===================================
-   * SHADOWS - Mapped to --sp- variables
-   * ===================================
-   */
-  --shadow-sm: var(--sp-shadow-sm);
-  --shadow-md: var(--sp-shadow-md);
-  --shadow-lg: var(--sp-shadow-lg);
-  --shadow-xl: var(--sp-shadow-xl);
-}
-
-/* ===================================
- * THEME MODE CLASSES
- * ===================================
- * Force light/dark mode on specific elements
- */
-
-.light {
-  --sp-color-bg-primary: var(--sp-light-color-bg-primary);
-  --sp-color-bg-secondary: var(--sp-light-color-bg-secondary);
-  --sp-color-bg-tertiary: var(--sp-light-color-bg-tertiary);
-  --sp-color-text-primary: var(--sp-light-color-text-primary);
-  --sp-color-text-secondary: var(--sp-light-color-text-secondary);
-  --sp-color-text-tertiary: var(--sp-light-color-text-tertiary);
-  --sp-color-text-inverted: var(--sp-light-color-text-inverted);
-  --sp-color-border: var(--sp-light-color-border);
-  --sp-success: var(--sp-light-success);
-  --sp-warning: var(--sp-light-warning);
-  --sp-error: var(--sp-light-error);
-  --sp-info: var(--sp-light-info);
-  --sp-accent: var(--sp-light-accent);
-  --sp-accent-hover: var(--sp-light-accent-hover);
-  --sp-accent-active: var(--sp-light-accent-active);
-  --sp-accent-foreground: var(--sp-light-accent-foreground);
-
-  /* shadcn/ui light mode variables */
-  --background: var(--sp-light-color-bg-primary);
-  --foreground: var(--sp-light-color-text-primary);
-  --card: var(--sp-light-color-bg-primary);
-  --card-foreground: var(--sp-light-color-text-primary);
-  --popover: var(--sp-light-color-bg-primary);
-  --popover-foreground: var(--sp-light-color-text-primary);
-  --primary: var(--sp-light-accent);
-  --primary-foreground: var(--sp-accent-foreground);
-  --secondary: var(--sp-light-color-bg-secondary);
-  --secondary-foreground: var(--sp-light-color-text-primary);
-  --muted: var(--sp-light-color-bg-tertiary);
-  --muted-foreground: var(--sp-light-color-text-tertiary);
-  --accent: var(--sp-light-accent);
-  --accent-foreground: var(--sp-accent-foreground);
-  --destructive: var(--sp-light-error);
-  --destructive-foreground: var(--sp-accent-foreground);
-  --border: var(--sp-light-color-border);
-  --input: var(--sp-light-color-bg-secondary);
-  --ring: var(--sp-light-accent);
-  --sidebar: var(--sp-light-sidebar);
-  --sidebar-foreground: var(--sp-light-color-text-primary);
-  --sidebar-primary: var(--sp-light-accent);
-  --sidebar-primary-foreground: var(--sp-light-color-text-primary);
-  --sidebar-accent: var(--sp-light-accent);
-  --sidebar-accent-foreground: var(--sp-light-color-text-primary);
-  --sidebar-border: var(--sp-light-color-border);
-  --sidebar-ring: var(--sp-light-accent);
-}
-
-.dark {
-  --sp-color-bg-primary: var(--sp-dark-color-bg-primary);
-  --sp-color-bg-secondary: var(--sp-dark-color-bg-secondary);
-  --sp-color-bg-tertiary: var(--sp-dark-color-bg-tertiary);
-  --sp-color-text-primary: var(--sp-dark-color-text-primary);
-  --sp-color-text-secondary: var(--sp-dark-color-text-secondary);
-  --sp-color-text-tertiary: var(--sp-dark-color-text-tertiary);
-  --sp-color-text-inverted: var(--sp-dark-color-text-inverted);
-  --sp-color-border: var(--sp-dark-color-border);
-  --sp-success: var(--sp-dark-success);
-  --sp-warning: var(--sp-dark-warning);
-  --sp-error: var(--sp-dark-error);
-  --sp-info: var(--sp-dark-info);
-  --sp-accent: var(--sp-dark-accent);
-  --sp-accent-hover: var(--sp-dark-accent-hover);
-  --sp-accent-active: var(--sp-dark-accent-active);
-  --sp-accent-foreground: var(--sp-dark-accent-foreground);
-
-  /* shadcn/ui dark mode variables */
-  --background: var(--sp-dark-color-bg-primary);
-  --foreground: var(--sp-dark-color-text-primary);
-  --card: var(--sp-dark-color-bg-primary);
-  --card-foreground: var(--sp-dark-color-text-primary);
-  --popover: var(--sp-dark-color-bg-primary);
-  --popover-foreground: var(--sp-dark-color-text-primary);
-  --primary: var(--sp-dark-accent);
-  --primary-foreground: var(--sp-accent-foreground);
-  --secondary: var(--sp-dark-color-bg-secondary);
-  --secondary-foreground: var(--sp-dark-color-text-primary);
-  --muted: var(--sp-dark-color-bg-tertiary);
-  --muted-foreground: var(--sp-dark-color-text-tertiary);
-  --accent: var(--sp-dark-accent);
-  --accent-foreground: var(--sp-accent-foreground);
-  --destructive: var(--sp-dark-error);
-  --destructive-foreground: var(--sp-accent-foreground);
-  --border: var(--sp-dark-color-border);
-  --input: var(--sp-dark-color-bg-secondary);
-  --ring: var(--sp-dark-accent);
-  --sidebar: var(--sp-dark-sidebar);
-  --sidebar-foreground: var(--sp-dark-color-text-primary);
-  --sidebar-primary: var(--sp-dark-accent);
-  --sidebar-primary-foreground: var(--sp-dark-color-text-primary);
-  --sidebar-accent: var(--sp-dark-accent);
-  --sidebar-accent-foreground: var(--sp-dark-color-text-primary);
-  --sidebar-border: var(--sp-dark-color-border);
-  --sidebar-ring: var(--sp-dark-accent);
-}
-
-@theme inline {
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

package/template/components.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/styles/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib",
-    "ui": "@/components/shadcn",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
-}

package/template/dev/styles.css

@@ -1,6 +0,0 @@
-/* Dev styles - imports globals.css */
-@import "@/styles/globals.css";
-
-/* Scan sunpeak source for Tailwind classes (only works in workspace, ignored otherwise) */
-@source "../../src/**/*.{ts,tsx}";
-@source "../node_modules/sunpeak/**/*.{ts,tsx}"

package/template/postcss.config.js

@@ -1,5 +0,0 @@
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-};

package/template/src/components/shadcn/button.tsx

@@ -1,60 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/index"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }

package/template/src/components/shadcn/card.tsx

@@ -1,76 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/index"
-
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/template/src/components/shadcn/carousel.tsx

@@ -1,260 +0,0 @@
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
-
-import { cn } from "@/lib/index"
-import { Button } from "@/components/shadcn/button"
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext)
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
-  }
-
-  return context
-}
-
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-      },
-      plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-    const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
-        return
-      }
-
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [])
-
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
-
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
-
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
-          event.preventDefault()
-          scrollPrev()
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault()
-          scrollNext()
-        }
-      },
-      [scrollPrev, scrollNext]
-    )
-
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return
-      }
-
-      setApi(api)
-    }, [api, setApi])
-
-    React.useEffect(() => {
-      if (!api) {
-        return
-      }
-
-      onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
-
-      return () => {
-        api?.off("select", onSelect)
-      }
-    }, [api, onSelect])
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api: api,
-          opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
-          role="region"
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    )
-  }
-)
-Carousel.displayName = "Carousel"
-
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
-
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
-      <div
-        ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-})
-CarouselContent.displayName = "CarouselContent"
-
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
-
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-CarouselItem.displayName = "CarouselItem"
-
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
-
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-})
-CarouselNext.displayName = "CarouselNext"
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}

package/template/src/components/shadcn/index.ts

@@ -1,5 +0,0 @@
-export * from './button';
-export * from './card';
-export * from './carousel';
-export * from './label';
-export * from './select';

package/template/src/components/shadcn/label.tsx

@@ -1,24 +0,0 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/index"
-
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }