create-starlight-cms 0.9.0

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

@@ -0,0 +1,225 @@
+:root {
+  --tt-ig-placeholder: var(--tt-gray-light-a-400);
+  --tt-ig-border: var(--tt-gray-light-a-200);
+  --tt-ig-border-focus: var(--tt-gray-light-a-300);
+  --tt-ig-addon-color: var(--tt-gray-light-a-400);
+}
+
+.dark {
+  --tt-ig-placeholder: var(--tt-gray-dark-a-400);
+  --tt-ig-border: var(--tt-gray-dark-a-200);
+  --tt-ig-border-focus: var(--tt-gray-dark-a-300);
+  --tt-ig-addon-color: var(--tt-gray-dark-a-400);
+}
+
+/* ── InputGroup ─────────────────────────────────────────────── */
+.tiptap-input-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 2rem;
+  border: 1px solid var(--tt-ig-border);
+  border-radius: 0.5rem;
+  background-color: transparent;
+  outline: none;
+  transition:
+    color,
+    background-color,
+    border-color 150ms;
+}
+
+/* Height overrides */
+.tiptap-input-group:has(> textarea),
+.tiptap-input-group:has(> [data-align="block-end"]),
+.tiptap-input-group:has(> [data-align="block-start"]) {
+  height: auto;
+}
+
+/* Column layout for block-aligned addons */
+.tiptap-input-group:has(> [data-align="block-end"]),
+.tiptap-input-group:has(> [data-align="block-start"]) {
+  flex-direction: column;
+}
+
+/* Inner input padding when addons are present */
+.tiptap-input-group:has(> [data-align="inline-end"]) > input {
+  padding-right: 0.375rem;
+}
+.tiptap-input-group:has(> [data-align="inline-start"]) > input {
+  padding-left: 0.375rem;
+}
+.tiptap-input-group:has(> [data-align="block-end"]) > input {
+  padding-top: 0.75rem;
+}
+.tiptap-input-group:has(> [data-align="block-start"]) > input {
+  padding-bottom: 0.75rem;
+}
+
+/* Focus */
+.tiptap-input-group:has(
+  [data-slot="tiptap-input-group-control"]:focus-visible
+) {
+  border-color: var(--tt-ig-border-focus);
+}
+
+/* Combobox override */
+[data-slot="combobox-content"] .tiptap-input-group:focus-within {
+  border-color: inherit;
+  box-shadow: none;
+}
+
+/* ── InputGroupAddon ────────────────────────────────────────── */
+.tiptap-input-group-addon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: auto;
+  gap: 0.5rem;
+  padding: 0.375rem 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--tt-ig-addon-color);
+  cursor: text;
+  user-select: none;
+}
+
+.tiptap-input-group-addon > svg:not([class*="size-"]) {
+  width: 1rem;
+  height: 1rem;
+}
+
+.tiptap-input-group-addon > kbd {
+  border-radius: calc(9999px - 5px);
+}
+
+.tiptap-input-group[data-disabled="true"] .tiptap-input-group-addon {
+  opacity: 0.5;
+}
+
+/* Inline-start */
+.tiptap-input-group-addon--inline-start {
+  order: -1;
+  padding-left: 0.5rem;
+}
+.tiptap-input-group-addon--inline-start:has(> button) {
+  margin-left: -0.3rem;
+}
+.tiptap-input-group-addon--inline-start:has(> kbd) {
+  margin-left: -0.15rem;
+}
+
+/* Inline-end */
+.tiptap-input-group-addon--inline-end {
+  order: 9999;
+  padding-right: 0.5rem;
+}
+.tiptap-input-group-addon--inline-end:has(> button) {
+  margin-right: -0.3rem;
+}
+.tiptap-input-group-addon--inline-end:has(> kbd) {
+  margin-right: -0.15rem;
+}
+
+/* Block-start */
+.tiptap-input-group-addon--block-start {
+  order: -1;
+  width: 100%;
+  justify-content: flex-start;
+  padding: 0.5rem 0.625rem 0;
+}
+.tiptap-input-group-addon--block-start .border-b {
+  padding-bottom: 0.5rem;
+}
+
+/* Block-end */
+.tiptap-input-group-addon--block-end {
+  order: 9999;
+  width: 100%;
+  justify-content: flex-start;
+  padding: 0 0.625rem 0.5rem;
+}
+.tiptap-input-group-addon--block-end .border-t {
+  padding-top: 0.5rem;
+}
+
+/* ── InputGroupButton ───────────────────────────────────────── */
+.tiptap-input-group-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  box-shadow: none;
+}
+
+.tiptap-input-group-button--xs {
+  height: 1.5rem;
+  gap: 0.25rem;
+  border-radius: calc(9999px - 3px);
+  padding: 0 0.375rem;
+}
+.tiptap-input-group-button--xs > svg:not([class*="size-"]) {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.tiptap-input-group-button--icon-xs {
+  width: 1.5rem;
+  height: 1.5rem;
+  min-width: auto;
+  border-radius: calc(9999px - 3px);
+  padding: 0;
+}
+
+.tiptap-input-group-button--icon-sm {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+}
+
+/* ── InputGroupText ─────────────────────────────────────────── */
+.tiptap-input-group-text {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--tt-ig-addon-color);
+}
+
+.tiptap-input-group-text svg:not([class*="size-"]) {
+  width: 1rem;
+  height: 1rem;
+}
+.tiptap-input-group-text svg {
+  pointer-events: none;
+}
+
+/* ── InputGroupControl ──────────────────────────────────────── */
+.tiptap-input-group-control {
+  flex: 1;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  outline: none;
+}
+
+.tiptap-input-group-control:focus-visible,
+.tiptap-input-group-control[aria-invalid="true"],
+.tiptap-input-group-control:disabled {
+  background: transparent;
+  box-shadow: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .tiptap-input-group-control,
+  .tiptap-input-group-control:disabled {
+    background: transparent;
+  }
+}
+
+.tiptap-input-group-control--textarea {
+  padding-block: 0.5rem;
+  resize: none;
+}

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

@@ -0,0 +1,135 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/tiptap-utils"
+
+import { Input } from "@/components/tiptap-ui-primitive/input"
+import { Button } from "@/components/tiptap-ui-primitive/button"
+import { Textarea } from "@/components/tiptap-ui-primitive/textarea"
+
+import "./input-group.scss"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="tiptap-input-group"
+      role="group"
+      className={cn("tiptap-input-group", className)}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva("tiptap-input-group-addon", {
+  variants: {
+    align: {
+      "inline-start": "tiptap-input-group-addon--inline-start",
+      "inline-end": "tiptap-input-group-addon--inline-end",
+      "block-start": "tiptap-input-group-addon--block-start",
+      "block-end": "tiptap-input-group-addon--block-end",
+    },
+  },
+  defaultVariants: {
+    align: "inline-start",
+  },
+})
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="tiptap-input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) return
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva("tiptap-input-group-button", {
+  variants: {
+    size: {
+      xs: "tiptap-input-group-button--xs",
+      sm: "tiptap-input-group-button--sm",
+      "icon-xs": "tiptap-input-group-button--icon-xs",
+      "icon-sm": "tiptap-input-group-button--icon-sm",
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+  },
+})
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    type?: "button" | "submit" | "reset"
+  }) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span className={cn("tiptap-input-group-text", className)} {...props} />
+  )
+}
+
+const InputGroupInput = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentProps<"input">
+>(({ className, ...props }, ref) => (
+  <Input
+    ref={ref}
+    data-slot="tiptap-input-group-control"
+    className={cn("tiptap-input-group-control", className)}
+    {...props}
+  />
+))
+
+InputGroupInput.displayName = "InputGroupInput"
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="tiptap-input-group-control"
+      className={cn(
+        "tiptap-input-group-control tiptap-input-group-control--textarea",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

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

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

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

@@ -0,0 +1,64 @@
+.tiptap-popover {
+  --tt-popover-bg-color: var(--white);
+  --tt-popover-border-color: var(--tt-gray-light-a-100);
+  --tt-popover-text-color: var(--tt-gray-light-a-600);
+}
+
+:root.dark,
+.dark {
+  --tt-popover-border-color: var(--tt-gray-dark-a-50);
+  --tt-popover-bg-color: var(--tt-gray-dark-50);
+  --tt-popover-text-color: var(--tt-gray-dark-a-600);
+}
+
+/* --------------------------------------------
+    --------- POPOVER STYLING SETTINGS -----------
+    -------------------------------------------- */
+.tiptap-popover {
+  z-index: 50;
+  outline: none;
+  transform-origin: var(--radix-popover-content-transform-origin);
+  max-height: var(--radix-popover-content-available-height);
+
+  > * {
+    max-height: var(--radix-popover-content-available-height);
+  }
+
+  /* Animation states */
+  &[data-state="open"] {
+    animation:
+      fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1),
+      zoomIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-state="closed"] {
+    animation:
+      fadeOut 150ms cubic-bezier(0.16, 1, 0.3, 1),
+      zoomOut 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  /* Position-based animations */
+  &[data-side="top"],
+  &[data-side="top-start"],
+  &[data-side="top-end"] {
+    animation: slideFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-side="right"],
+  &[data-side="right-start"],
+  &[data-side="right-end"] {
+    animation: slideFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-side="bottom"],
+  &[data-side="bottom-start"],
+  &[data-side="bottom-end"] {
+    animation: slideFromTop 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-side="left"],
+  &[data-side="left-start"],
+  &[data-side="left-end"] {
+    animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}

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

@@ -0,0 +1,35 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import { cn } from "@/lib/tiptap-utils"
+import "@/components/tiptap-ui-primitive/popover/popover.scss"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        align={align}
+        sideOffset={sideOffset}
+        className={cn("tiptap-popover", className)}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+export { Popover, PopoverTrigger, PopoverContent }

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

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

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

@@ -0,0 +1,23 @@
+.tiptap-separator {
+  --tt-link-border-color: var(--tt-gray-light-a-200);
+
+  .dark & {
+    --tt-link-border-color: var(--tt-gray-dark-a-200);
+  }
+}
+
+.tiptap-separator {
+  flex-shrink: 0;
+  background-color: var(--tt-link-border-color);
+
+  &[data-orientation="horizontal"] {
+    height: 1px;
+    width: 100%;
+    margin: 0.5rem 0;
+  }
+
+  &[data-orientation="vertical"] {
+    height: 1.5rem;
+    width: 1px;
+  }
+}

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

@@ -0,0 +1,28 @@
+import "@/components/tiptap-ui-primitive/separator/separator.scss"
+import { cn } from "@/lib/tiptap-utils"
+
+export type Orientation = "horizontal" | "vertical"
+
+export function Separator({
+  decorative,
+  orientation = "vertical",
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  orientation?: Orientation
+  decorative?: boolean
+}) {
+  const ariaOrientation = orientation === "vertical" ? orientation : undefined
+  const semanticProps = decorative
+    ? { role: "none" }
+    : { "aria-orientation": ariaOrientation, role: "separator" }
+
+  return (
+    <div
+      className={cn("tiptap-separator", className)}
+      data-orientation={orientation}
+      {...semanticProps}
+      {...props}
+    />
+  )
+}

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

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

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

@@ -0,0 +1,24 @@
+"use client"
+
+export type SpacerOrientation = "horizontal" | "vertical"
+
+export function Spacer({
+  orientation = "horizontal",
+  size,
+  style = {},
+  ...props
+}: React.ComponentProps<"div"> & {
+  orientation?: SpacerOrientation
+  size?: string | number
+}) {
+  const computedStyle = {
+    ...style,
+    ...(orientation === "horizontal" && !size && { flex: 1 }),
+    ...(size && {
+      width: orientation === "vertical" ? "1px" : size,
+      height: orientation === "horizontal" ? "1px" : size,
+    }),
+  }
+
+  return <div {...props} style={computedStyle} />
+}

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

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

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

@@ -0,0 +1,86 @@
+:root {
+  --tiptap-switch-track: var(--tt-gray-light-a-300);
+  --tiptap-switch-track-checked: var(--tt-brand-color-500);
+  --tiptap-switch-thumb: var(--white);
+  --tiptap-switch-ring: var(--tt-brand-color-500);
+}
+
+.dark {
+  --tiptap-switch-track: var(--tt-gray-dark-a-300);
+  --tiptap-switch-track-checked: var(--tt-brand-color-500);
+  --tiptap-switch-thumb: var(--white);
+  --tiptap-switch-ring: var(--tt-brand-color-500);
+}
+
+.tiptap-switch {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 9999px;
+  background-color: var(--tiptap-switch-track);
+  outline: none;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    box-shadow 150ms ease,
+    border-color 150ms ease;
+
+  /* Enlarged invisible hit area (after:-inset-x-3 after:-inset-y-2). */
+  &::after {
+    content: "";
+    position: absolute;
+    inset: -0.5rem -0.75rem;
+  }
+
+  &[data-size="default"] {
+    width: 32px;
+    height: 18.4px;
+  }
+
+  &[data-size="sm"] {
+    width: 24px;
+    height: 14px;
+  }
+
+  &[data-checked] {
+    background-color: var(--tiptap-switch-track-checked);
+  }
+
+  &:focus-visible {
+    border-color: var(--tiptap-switch-ring);
+    box-shadow: 0 0 0 3px
+      color-mix(in srgb, var(--tiptap-switch-ring) 50%, transparent);
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.tiptap-switch-thumb {
+  pointer-events: none;
+  display: block;
+  border-radius: 9999px;
+  background-color: var(--tiptap-switch-thumb);
+  transform: translateX(0);
+  transition: transform 150ms ease;
+
+  .tiptap-switch[data-size="default"] & {
+    width: 16px;
+    height: 16px;
+  }
+
+  .tiptap-switch[data-size="sm"] & {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* Slide to the opposite end; relative to the thumb's own width so it works
+     at every size (matches translate-x-[calc(100%-2px)]). */
+  .tiptap-switch[data-checked] & {
+    transform: translateX(calc(100% - 2px));
+  }
+}

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

@@ -0,0 +1,29 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+
+import { cn } from "@/lib/tiptap-utils"
+
+import "./switch.scss"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="tiptap-switch"
+      data-size={size}
+      className={cn("tiptap-switch", className)}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="tiptap-switch-thumb"
+        className="tiptap-switch-thumb"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

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

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