create-starlight-cms 0.9.0

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

@@ -0,0 +1,390 @@
+.tiptap-button {
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-feature-settings:
+    "salt" on,
+    "cv01" on;
+  line-height: 1.15;
+  height: 2rem;
+  min-width: 2rem;
+  border: none;
+  padding: 0.5rem;
+  gap: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--tt-radius-lg, 0.75rem);
+  transition-property: background, color, opacity;
+  transition-duration: var(--tt-transition-duration-default);
+  transition-timing-function: var(--tt-transition-easing-default);
+
+  // focus-visible
+  &:focus-visible {
+    outline: none;
+  }
+
+  &[data-highlighted="true"],
+  &[data-focus-visible="true"] {
+    background-color: var(--tt-button-hover-bg-color);
+    color: var(--tt-button-hover-text-color);
+    // outline: 2px solid var(--tt-button-active-icon-color);
+  }
+
+  &[data-weight="small"] {
+    width: 1.5rem;
+    min-width: 1.5rem;
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  /* button size large */
+  &[data-size="large"] {
+    font-size: 0.9375rem;
+    height: 2.375rem;
+    min-width: 2.375rem;
+    padding: 0.625rem;
+  }
+
+  /* button size small */
+  &[data-size="small"] {
+    font-size: 0.75rem;
+    line-height: 1.2;
+    height: 1.5rem;
+    min-width: 1.5rem;
+    padding: 0.3125rem;
+    border-radius: var(--tt-radius-md, 0.5rem);
+  }
+
+  /* trim / expand text of the button */
+  .tiptap-button-text {
+    padding: 0 0.125rem;
+    flex-grow: 1;
+    text-align: left;
+    line-height: 1.5rem;
+  }
+
+  &[data-text-trim="on"] {
+    .tiptap-button-text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  /* global icon settings */
+  .tiptap-button-icon,
+  .tiptap-button-icon-sub,
+  .tiptap-button-dropdown-arrows,
+  .tiptap-button-dropdown-small {
+    flex-shrink: 0;
+  }
+
+  /* standard icon, what is used */
+  .tiptap-button-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &[data-size="large"] .tiptap-button-icon {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  &[data-size="small"] .tiptap-button-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  /* if 2 icons are used and this icon should be more subtle */
+  .tiptap-button-icon-sub {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &[data-size="large"] .tiptap-button-icon-sub {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  &[data-size="small"] .tiptap-button-icon-sub {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  /* dropdown menus or arrows that are slightly smaller */
+  .tiptap-button-dropdown-arrows {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  &[data-size="large"] .tiptap-button-dropdown-arrows {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  &[data-size="small"] .tiptap-button-dropdown-arrows {
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+
+  /* dropdown menu for icon buttons only */
+  .tiptap-button-dropdown-small {
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+
+  &[data-size="large"] .tiptap-button-dropdown-small {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  &[data-size="small"] .tiptap-button-dropdown-small {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  /* button only has icons */
+  &:has(> svg):not(:has(> :not(svg))) {
+    gap: 0.125rem;
+
+    &[data-size="large"],
+    &[data-size="small"] {
+      gap: 0.125rem;
+    }
+  }
+
+  /* button only has 2 icons and one of them is dropdown small */
+  &:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(
+      :has(> svg:nth-of-type(3))
+    ):not(:has(> .tiptap-button-text)) {
+    gap: 0;
+    padding-right: 0.25rem;
+
+    &[data-size="large"] {
+      padding-right: 0.375rem;
+    }
+
+    &[data-size="small"] {
+      padding-right: 0.25rem;
+    }
+  }
+
+  /* Emoji is used in a button */
+  .tiptap-button-emoji {
+    width: 1rem;
+    display: flex;
+    justify-content: center;
+  }
+
+  &[data-size="large"] .tiptap-button-emoji {
+    width: 1.125rem;
+  }
+
+  &[data-size="small"] .tiptap-button-emoji {
+    width: 0.875rem;
+  }
+
+  /* Checkbox-style toggle button */
+  &[data-variant="check"] {
+    width: 100%;
+    justify-content: flex-start;
+    cursor: pointer;
+
+    .tiptap-button-text {
+      padding: 0;
+    }
+
+    .tiptap-button-check {
+      display: grid;
+      place-content: center;
+      flex-shrink: 0;
+      width: 1rem;
+      height: 1rem;
+      margin-left: auto;
+      border: 1px solid var(--tt-button-check-border-color);
+      border-radius: 0.25rem;
+      background-color: var(--tt-button-check-bg-color);
+      color: transparent;
+      transition-property: background-color, border-color, color;
+      transition-duration: var(--tt-transition-duration-default);
+      transition-timing-function: var(--tt-transition-easing-default);
+
+      > svg {
+        width: 0.875rem;
+        height: 0.875rem;
+      }
+    }
+
+    &:hover:not([disabled]):not([aria-checked="true"]):not(
+        [aria-checked="mixed"]
+      )
+      .tiptap-button-check {
+      border-color: var(--tt-button-check-hover-border-color);
+      background-color: var(--tt-button-check-hover-bg-color);
+    }
+
+    &[aria-checked="true"],
+    &[aria-checked="mixed"] {
+      color: var(--tt-button-check-checked-text-color);
+
+      .tiptap-button-check {
+        border-color: var(--tt-button-check-checked-border-color);
+        background-color: var(--tt-button-check-checked-bg-color);
+        color: var(--tt-button-check-checked-icon-color);
+      }
+    }
+
+    &[aria-checked="mixed"] {
+      .tiptap-button-check {
+        &::after {
+          width: 0.5rem;
+          height: 0.125rem;
+          border-radius: 999px;
+          background-color: currentColor;
+          content: "";
+        }
+
+        > svg {
+          display: none;
+        }
+      }
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 3px var(--tt-button-check-focus-ring-color);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+}
+
+/* --------------------------------------------
+----------- BUTTON COLOR SETTINGS -------------
+-------------------------------------------- */
+
+.tiptap-button {
+  background-color: var(--tt-button-default-bg-color);
+  color: var(--tt-button-default-text-color);
+
+  .tiptap-button-icon {
+    color: var(--tt-button-default-icon-color);
+  }
+
+  .tiptap-button-icon-sub {
+    color: var(--tt-button-default-icon-sub-color);
+  }
+
+  .tiptap-button-dropdown-arrows {
+    color: var(--tt-button-default-dropdown-arrows-color);
+  }
+
+  .tiptap-button-dropdown-small {
+    color: var(--tt-button-default-dropdown-arrows-color);
+  }
+
+  /* hover state of a button */
+  &:hover:not([data-active-item="true"]):not([disabled]),
+  &[data-active-item="true"]:not([disabled]),
+  &[data-highlighted]:not([disabled]):not([data-highlighted="false"]) {
+    background-color: var(--tt-button-hover-bg-color);
+    color: var(--tt-button-hover-text-color);
+
+    .tiptap-button-icon {
+      color: var(--tt-button-hover-icon-color);
+    }
+
+    .tiptap-button-icon-sub {
+      color: var(--tt-button-hover-icon-sub-color);
+    }
+
+    .tiptap-button-dropdown-arrows,
+    .tiptap-button-dropdown-small {
+      color: var(--tt-button-hover-dropdown-arrows-color);
+    }
+  }
+
+  /* Active state of a button */
+  &[data-active-state="on"]:not([disabled]),
+  &[data-state="open"]:not([disabled]) {
+    background-color: var(--tt-button-active-bg-color);
+    color: var(--tt-button-active-text-color);
+
+    .tiptap-button-icon {
+      color: var(--tt-button-active-icon-color);
+    }
+
+    .tiptap-button-icon-sub {
+      color: var(--tt-button-active-icon-sub-color);
+    }
+
+    .tiptap-button-dropdown-arrows,
+    .tiptap-button-dropdown-small {
+      color: var(--tt-button-active-dropdown-arrows-color);
+    }
+
+    &:hover {
+      background-color: var(--tt-button-active-hover-bg-color);
+    }
+
+    /* Emphasized */
+    &[data-appearance="emphasized"] {
+      background-color: var(--tt-button-active-bg-color-emphasized);
+      color: var(--tt-button-active-text-color-emphasized);
+
+      .tiptap-button-icon {
+        color: var(--tt-button-active-icon-color-emphasized);
+      }
+
+      .tiptap-button-icon-sub {
+        color: var(--tt-button-active-icon-sub-color-emphasized);
+      }
+
+      .tiptap-button-dropdown-arrows,
+      .tiptap-button-dropdown-small {
+        color: var(--tt-button-active-dropdown-arrows-color-emphasized);
+      }
+
+      &:hover {
+        background-color: var(--tt-button-active-hover-bg-color-emphasized);
+      }
+    }
+
+    /* Subdued */
+    &[data-appearance="subdued"] {
+      background-color: var(--tt-button-active-bg-color-subdued);
+      color: var(--tt-button-active-text-color-subdued);
+
+      .tiptap-button-icon {
+        color: var(--tt-button-active-icon-color-subdued);
+      }
+
+      .tiptap-button-icon-sub {
+        color: var(--tt-button-active-icon-sub-color-subdued);
+      }
+
+      .tiptap-button-dropdown-arrows,
+      .tiptap-button-dropdown-small {
+        color: var(--tt-button-active-dropdown-arrows-color-subdued);
+      }
+
+      &:hover {
+        background-color: var(--tt-button-active-hover-bg-color-subdued);
+
+        .tiptap-button-icon {
+          color: var(--tt-button-active-icon-color-subdued);
+        }
+      }
+    }
+  }
+
+  &:disabled {
+    background-color: var(--tt-button-disabled-bg-color);
+    color: var(--tt-button-disabled-text-color);
+
+    .tiptap-button-icon {
+      color: var(--tt-button-disabled-icon-color);
+    }
+  }
+}

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

@@ -0,0 +1,158 @@
+import { forwardRef, Fragment, useMemo } from "react"
+
+// --- Tiptap UI Primitive ---
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/tiptap-ui-primitive/tooltip"
+
+// --- Icons ---
+import { CheckIcon } from "@/components/tiptap-icons/check-icon"
+
+// --- Lib ---
+import { cn, parseShortcutKeys } from "@/lib/tiptap-utils"
+
+import "@/components/tiptap-ui-primitive/button/button-colors.scss"
+import "@/components/tiptap-ui-primitive/button/button.scss"
+
+export type ButtonStyle =
+  "ghost" | "primary" | "secondary" | "tertiary" | "subtle"
+export type ButtonVariant = ButtonStyle | "check"
+export type ButtonSize = "small" | "default" | "large"
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  showTooltip?: boolean
+  tooltip?: React.ReactNode
+  shortcutKeys?: string
+  /**
+   * Visual treatment or feature variant.
+   *
+   * Style values map to `data-style` and pull their colors from
+   * `button-colors.scss`: `subtle` is the neutral default (a faint gray
+   * fill), `ghost` is transparent, `primary` is the brand fill, `secondary`
+   * is a solid neutral (dark fill in light mode, light fill in dark mode),
+   * and `tertiary` currently mirrors `ghost`.
+   *
+   * The `check` variant is a checkbox-style toggle button. It defaults to
+   * the ghost style and small size, supplies `role="checkbox"`, and renders
+   * its own check indicator. Set `aria-checked` to control its state.
+   *
+   * @example
+   * ```tsx
+   * <Button
+   *   variant="check"
+   *   aria-checked={checked}
+   *   onClick={() => setChecked((value) => !value)}
+   * >
+   *   <FilterIcon className="tiptap-button-icon" />
+   *   <span className="tiptap-button-text">Only active items</span>
+   * </Button>
+   * ```
+   */
+  variant?: ButtonVariant
+  size?: ButtonSize
+}
+
+export const ShortcutDisplay: React.FC<{ shortcuts: string[] }> = ({
+  shortcuts,
+}) => {
+  if (shortcuts.length === 0) return null
+
+  return (
+    <div>
+      {shortcuts.map((key, index) => (
+        <Fragment key={index}>
+          {index > 0 && <kbd>+</kbd>}
+          <kbd>{key}</kbd>
+        </Fragment>
+      ))}
+    </div>
+  )
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      children,
+      tooltip,
+      showTooltip = true,
+      shortcutKeys,
+      variant,
+      size,
+      role,
+      "aria-checked": ariaChecked,
+      ...props
+    },
+    ref
+  ) => {
+    const isCheckVariant = variant === "check"
+    const buttonStyle: ButtonStyle | undefined = isCheckVariant
+      ? "ghost"
+      : variant
+    const buttonSize = isCheckVariant ? (size ?? "small") : size
+    const buttonRole = isCheckVariant ? (role ?? "checkbox") : role
+    const buttonAriaChecked = isCheckVariant
+      ? (ariaChecked ?? false)
+      : ariaChecked
+    const shortcuts = useMemo<string[]>(
+      () => parseShortcutKeys({ shortcutKeys }),
+      [shortcutKeys]
+    )
+    const content = (
+      <>
+        {children}
+        {isCheckVariant && (
+          <span className="tiptap-button-check" aria-hidden="true">
+            <CheckIcon />
+          </span>
+        )}
+      </>
+    )
+
+    if (!tooltip || !showTooltip) {
+      return (
+        <button
+          data-slot="tiptap-button"
+          className={cn("tiptap-button", className)}
+          ref={ref}
+          data-style={buttonStyle}
+          data-size={buttonSize}
+          data-variant={isCheckVariant ? "check" : undefined}
+          role={buttonRole}
+          aria-checked={buttonAriaChecked}
+          {...props}
+        >
+          {content}
+        </button>
+      )
+    }
+
+    return (
+      <Tooltip delay={200}>
+        <TooltipTrigger
+          data-slot="tiptap-button"
+          className={cn("tiptap-button", className)}
+          ref={ref}
+          data-style={buttonStyle}
+          data-size={buttonSize}
+          data-variant={isCheckVariant ? "check" : undefined}
+          role={buttonRole}
+          aria-checked={buttonAriaChecked}
+          {...props}
+        >
+          {content}
+        </TooltipTrigger>
+        <TooltipContent>
+          {tooltip}
+          <ShortcutDisplay shortcuts={shortcuts} />
+        </TooltipContent>
+      </Tooltip>
+    )
+  }
+)
+
+Button.displayName = "Button"
+
+export default Button

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

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

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

@@ -0,0 +1,89 @@
+.tiptap-button-group {
+  display: flex;
+  width: fit-content;
+  align-items: stretch;
+
+  /* nested tiptap-button-group gets a gap */
+  &:has(> [data-slot="tiptap-button-group"]) {
+    gap: 0.125rem;
+  }
+
+  /* focus-visible children stack correctly */
+  & > *:focus-visible {
+    position: relative;
+    z-index: 10;
+  }
+
+  /* select trigger without explicit width becomes fit-content */
+  & > [data-slot="select-trigger"]:not([class*="w-"]) {
+    width: fit-content;
+  }
+
+  /* input children fill remaining space */
+  & > input {
+    flex: 1;
+  }
+}
+
+/* Corners are only squared where two children meet, so first/last children
+   keep their own size-appropriate radius (e.g. small buttons use
+   --tt-radius-md, default buttons --tt-radius-lg, input-group buttons a
+   pill) instead of a hardcoded group radius. */
+
+/* ─── Horizontal ────────────────────────────────────────── */
+.tiptap-button-group-horizontal {
+  /* [data-slot] children followed by another: remove right radius */
+  & > [data-slot]:has(~ [data-slot]) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  /* non-first [data-slot] children: remove left radius + left border */
+  & > [data-slot] ~ [data-slot] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left-width: 0;
+  }
+}
+
+/* ─── Vertical ──────────────────────────────────────────── */
+.tiptap-button-group-vertical {
+  flex-direction: column;
+
+  /* [data-slot] children followed by another: remove bottom radius */
+  & > [data-slot]:has(~ [data-slot]) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  /* non-first [data-slot] children: remove top radius + top border */
+  & > [data-slot] ~ [data-slot] {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top-width: 0;
+  }
+}
+
+/* ─── Separator ──────────────────────────────────────────── */
+.tiptap-button-group-separator {
+  position: relative;
+  align-self: stretch;
+}
+
+.tiptap-button-group-separator[data-orientation="horizontal"] {
+  margin-left: 1px;
+  margin-right: 1px;
+}
+
+.tiptap-button-group-separator[data-orientation="horizontal"] {
+  width: auto;
+}
+
+.tiptap-button-group-separator[data-orientation="vertical"] {
+  margin-top: 1px;
+  margin-bottom: 1px;
+}
+
+.tiptap-button-group-separator[data-orientation="vertical"] {
+  height: auto;
+}

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

@@ -0,0 +1,72 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/tiptap-utils"
+import { Separator } from "@/components/tiptap-ui-primitive/separator"
+import "./button-group.scss"
+
+const buttonGroupVariants = cva("tiptap-button-group", {
+  variants: {
+    orientation: {
+      horizontal: "tiptap-button-group-horizontal",
+      vertical: "tiptap-button-group-vertical",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+})
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="tiptap-button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      { className: cn("tiptap-button-group-text", className) },
+      props
+    ),
+    render,
+    state: { slot: "tiptap-button-group-text" },
+  })
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="tiptap-button-group-separator"
+      orientation={orientation}
+      className={cn("tiptap-button-group-separator", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}

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

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