create-starlight-cms 0.9.0

package/template/src/admin/components/tiptap-ui-primitive/card/card.scss

@@ -0,0 +1,74 @@
+:root {
+  --tiptap-card-bg-color: var(--white);
+  --tiptap-card-border-color: var(--tt-gray-light-a-100);
+  --tiptap-card-group-label-color: var(--tt-gray-light-a-800);
+}
+
+.dark {
+  --tiptap-card-bg-color: var(--tt-gray-dark-50);
+  --tiptap-card-border-color: var(--tt-gray-dark-a-100);
+  --tiptap-card-group-label-color: var(--tt-gray-dark-a-800);
+}
+
+.tiptap-card {
+  --padding: 0.375rem;
+  --border-width: 1px;
+
+  border-radius: calc(var(--padding) + var(--tt-radius-lg));
+  box-shadow: var(--tt-shadow-elevated-md);
+  background-color: var(--tiptap-card-bg-color);
+  border: 1px solid var(--tiptap-card-border-color);
+  display: flex;
+  flex-direction: column;
+  outline: none;
+  align-items: center;
+
+  position: relative;
+  min-width: 0;
+  word-wrap: break-word;
+  background-clip: border-box;
+}
+
+.tiptap-card-header {
+  padding: 0.375rem;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  border-bottom: var(--border-width) solid var(--tiptap-card-border-color);
+}
+
+.tiptap-card-body {
+  padding: 0.375rem;
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+
+.tiptap-card-item-group {
+  position: relative;
+  display: flex;
+  vertical-align: middle;
+  min-width: max-content;
+
+  &[data-orientation="vertical"] {
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &[data-orientation="horizontal"] {
+    gap: 0.25rem;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.tiptap-card-group-label {
+  padding: 0.75rem 0.5rem 0.25rem;
+  line-height: normal;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: normal;
+  text-transform: capitalize;
+  color: var(--tiptap-card-group-label-color);
+}

package/template/src/admin/components/tiptap-ui-primitive/card/card.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import { forwardRef } from "react"
+import { cn } from "@/lib/tiptap-utils"
+import "@/components/tiptap-ui-primitive/card/card.scss"
+
+const Card = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return <div ref={ref} className={cn("tiptap-card", className)} {...props} />
+  }
+)
+Card.displayName = "Card"
+
+const CardHeader = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("tiptap-card-header", className)}
+        {...props}
+      />
+    )
+  }
+)
+CardHeader.displayName = "CardHeader"
+
+const CardBody = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("tiptap-card-body", className)} {...props} />
+    )
+  }
+)
+CardBody.displayName = "CardBody"
+
+const CardItemGroup = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    orientation?: "horizontal" | "vertical"
+  }
+>(({ className, orientation = "vertical", ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-orientation={orientation}
+      className={cn("tiptap-card-item-group", className)}
+      {...props}
+    />
+  )
+})
+CardItemGroup.displayName = "CardItemGroup"
+
+const CardGroupLabel = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("tiptap-card-group-label", className)}
+        {...props}
+      />
+    )
+  }
+)
+CardGroupLabel.displayName = "CardGroupLabel"
+
+const CardFooter = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("tiptap-card-footer", className)}
+        {...props}
+      />
+    )
+  }
+)
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardBody, CardItemGroup, CardGroupLabel }

package/template/src/admin/components/tiptap-ui-primitive/card/index.tsx

@@ -0,0 +1 @@
+export * from "./card"

package/template/src/admin/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.scss

@@ -0,0 +1,152 @@
+:root {
+  --tt-dropdown-menu-bg-color: var(--white);
+  --tt-dropdown-menu-text-color: var(--tt-gray-light-a-600);
+  --tt-dropdown-menu-label-color: var(--tt-gray-light-a-800);
+}
+
+:root.dark,
+.dark {
+  --tt-dropdown-menu-bg-color: var(--tt-gray-dark-50);
+  --tt-dropdown-menu-text-color: var(--tt-gray-dark-a-600);
+  --tt-dropdown-menu-label-color: var(--tt-gray-dark-a-800);
+}
+
+/* ============================================================
+   Dropdown Menu
+   ============================================================ */
+
+/* --- Content --- */
+
+.tiptap-dropdown-menu-content {
+  --slide-x: 0px;
+  --slide-y: 0px;
+  --padding: 0.375rem;
+
+  position: relative;
+  z-index: 50;
+  min-width: 8rem;
+  max-height: var(--radix-dropdown-menu-content-available-height);
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-radius: calc(var(--padding) + var(--tt-radius-lg));
+  padding: 0.375rem;
+  background-color: var(--tt-dropdown-menu-bg-color);
+  color: var(--tt-dropdown-menu-text-color);
+  box-shadow: var(--tt-shadow-elevated-md);
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  transition-duration: 100ms;
+}
+
+.tiptap-dropdown-menu-content[data-side="bottom"] {
+  --slide-y: -0.5rem;
+}
+.tiptap-dropdown-menu-content[data-side="top"] {
+  --slide-y: 0.5rem;
+}
+.tiptap-dropdown-menu-content[data-side="left"] {
+  --slide-x: 0.5rem;
+}
+.tiptap-dropdown-menu-content[data-side="right"] {
+  --slide-x: -0.5rem;
+}
+
+.tiptap-dropdown-menu-content[data-state="open"] {
+  animation: dropdown-in 100ms ease forwards;
+}
+
+.tiptap-dropdown-menu-content[data-state="closed"] {
+  animation: dropdown-out 100ms ease forwards;
+  overflow: hidden;
+}
+
+/* --- Sub Content --- */
+
+.tiptap-dropdown-menu-sub-content {
+  --slide-x: 0px;
+  --slide-y: 0px;
+  --padding: 0.375rem;
+
+  z-index: 50;
+  min-width: 6rem;
+  overflow: hidden;
+  border-radius: calc(var(--padding) + var(--tt-radius-lg));
+  padding: 0.25rem;
+  background-color: var(--tt-dropdown-menu-bg-color);
+  box-shadow: var(--tt-shadow-elevated-md);
+  color: var(--tt-dropdown-menu-text-color);
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  transition-duration: 100ms;
+}
+
+.tiptap-dropdown-menu-sub-content[data-side="bottom"] {
+  --slide-y: -0.5rem;
+}
+.tiptap-dropdown-menu-sub-content[data-side="top"] {
+  --slide-y: 0.5rem;
+}
+.tiptap-dropdown-menu-sub-content[data-side="left"] {
+  --slide-x: 0.5rem;
+}
+.tiptap-dropdown-menu-sub-content[data-side="right"] {
+  --slide-x: -0.5rem;
+}
+
+.tiptap-dropdown-menu-sub-content[data-state="open"] {
+  animation: dropdown-in 100ms ease forwards;
+}
+
+.tiptap-dropdown-menu-sub-content[data-state="closed"] {
+  animation: dropdown-out 100ms ease forwards;
+}
+
+/* Shared enter/exit keyframes — slide direction driven by --slide-x/y on the element */
+
+@keyframes dropdown-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translate(var(--slide-x), var(--slide-y));
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translate(0, 0);
+  }
+}
+
+@keyframes dropdown-out {
+  from {
+    opacity: 1;
+    transform: scale(1) translate(0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95) translate(var(--slide-x), var(--slide-y));
+  }
+}
+
+/* --- Label --- */
+
+.tiptap-dropdown-menu-label {
+  padding: 0.75rem 0.5rem 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: normal;
+  text-transform: capitalize;
+  color: var(--tt-dropdown-menu-label-color);
+}
+
+.tiptap-dropdown-menu-label[data-inset="true"] {
+  padding-left: 1.75rem;
+}
+
+.tiptap-dropdown-menu-group,
+.tiptap-dropdown-menu-group[data-orientation="vertical"] {
+  display: flex;
+  flex-direction: column;
+}
+
+.tiptap-dropdown-menu-group[data-orientation="horizontal"] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.25rem;
+}

package/template/src/admin/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.tsx

@@ -0,0 +1,262 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { cn } from "@/lib/tiptap-utils"
+import { CheckIcon } from "@/components/tiptap-icons/check-icon"
+
+import "@/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.scss"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return (
+    <DropdownMenuPrimitive.Root data-slot="tiptap-dropdown-menu" {...props} />
+  )
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal
+      data-slot="tiptap-dropdown-menu-portal"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="tiptap-dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="tiptap-dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn("tiptap-dropdown-menu-content", className)}
+        onCloseAutoFocus={(e) => e.preventDefault()}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group
+      data-slot="tiptap-dropdown-menu-group"
+      className={cn("tiptap-dropdown-menu-group", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="tiptap-dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn("tiptap-dropdown-menu-item", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="tiptap-dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn("tiptap-dropdown-menu-checkbox-item", className)}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="tiptap-dropdown-menu-item-indicator"
+        data-slot="tiptap-dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="tiptap-dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="tiptap-dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn("tiptap-dropdown-menu-radio-item", className)}
+      {...props}
+    >
+      <span
+        className="tiptap-dropdown-menu-item-indicator"
+        data-slot="tiptap-dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="tiptap-dropdown-menu-label"
+      data-inset={inset}
+      className={cn("tiptap-dropdown-menu-label", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="tiptap-dropdown-menu-separator"
+      className={cn("tiptap-dropdown-menu-separator", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="tiptap-dropdown-menu-shortcut"
+      className={cn("tiptap-dropdown-menu-shortcut", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return (
+    <DropdownMenuPrimitive.Sub
+      data-slot="tiptap-dropdown-menu-sub"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="tiptap-dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn("tiptap-dropdown-menu-sub-trigger", className)}
+      {...props}
+    >
+      {children}
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="tiptap-dropdown-menu-sub-content"
+      className={cn("tiptap-dropdown-menu-sub-content", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

package/template/src/admin/components/tiptap-ui-primitive/dropdown-menu/index.tsx

@@ -0,0 +1 @@
+export * from "./dropdown-menu"

package/template/src/admin/components/tiptap-ui-primitive/input/index.tsx

@@ -0,0 +1 @@
+export * from "./input"

package/template/src/admin/components/tiptap-ui-primitive/input/input.scss

@@ -0,0 +1,41 @@
+:root {
+  --tt-input-placeholder: var(--tt-gray-light-a-400);
+  --tt-input-border: var(--tt-gray-light-a-200);
+  --tt-input-border-focus: var(--tt-gray-light-a-300);
+}
+
+.dark {
+  --tt-input-placeholder: var(--tt-gray-dark-a-400);
+  --tt-input-border: var(--tt-gray-dark-a-200);
+  --tt-input-border-focus: var(--tt-gray-dark-a-300);
+}
+
+.tiptap-input {
+  width: 100%;
+  min-width: 0;
+  height: 2rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: var(--tt-radius-md);
+  border: 1px solid var(--tt-input-border);
+  background: transparent;
+  font-size: 1rem;
+  outline: none;
+  transition:
+    color,
+    background-color,
+    border-color 150ms;
+
+  &::placeholder {
+    color: var(--tt-input-placeholder);
+  }
+}
+
+.tiptap-input:focus-visible {
+  border-color: var(--tt-input-border-focus);
+}
+
+@media (min-width: 768px) {
+  .tiptap-input {
+    font-size: 0.875rem;
+  }
+}

package/template/src/admin/components/tiptap-ui-primitive/input/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/tiptap-utils"
+import "@/components/tiptap-ui-primitive/input/input.scss"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        type={type}
+        data-slot="tiptap-input"
+        className={cn("tiptap-input", className)}
+        {...props}
+      />
+    )
+  }
+)
+
+Input.displayName = "Input"
+
+export { Input }

package/template/src/admin/components/tiptap-ui-primitive/input-group/index.tsx

@@ -0,0 +1 @@
+export * from "./input-group"