@sanity/sanity-id 0.0.0

package/src/components/Breadcrumbs.module.css

@@ -0,0 +1,21 @@
+.nav {
+  @apply w-fit;
+}
+
+.list {
+  @apply flex w-fit list-none flex-wrap gap-x-8 p-0;
+}
+
+.listItem::after {
+  @apply label-md ml-8;
+
+  content: "/";
+}
+
+.link {
+  @apply label-md text-fg-dim no-underline underline-offset-2 hover:text-fg-strong hover:underline;
+
+  --focus-ring-width: 2px;
+  --focus-ring-color: currentColor;
+  --focus-ring-offset: 2px;
+}

package/src/components/Breadcrumbs.tsx

@@ -0,0 +1,38 @@
+import cn from "clsx"
+import { Suspense } from "react"
+import { NavLink } from "./helpers/NavLink"
+import css from "./Breadcrumbs.module.css"
+
+export type Breadcrumb = {
+  title: string
+  href: string
+  current?: boolean
+}
+
+export type BreadcrumbsProps = {
+  label: string
+  links: Array<Breadcrumb>
+  className?: string
+}
+
+export function Breadcrumbs(props: BreadcrumbsProps) {
+  return (
+    <nav aria-label={props.label} className={cn(props.className, css.nav)}>
+      <ol className={css.list}>
+        {props.links.map((link) => (
+          <li key={link.href + link.title} className={css.listItem}>
+            <Suspense>
+              <NavLink
+                href={link.href}
+                aria-current={link.current ? "page" : undefined}
+                className={css.link}
+              >
+                {link.title}
+              </NavLink>
+            </Suspense>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  )
+}

package/src/components/Button.module.css

@@ -0,0 +1,407 @@
+.button {
+  @apply relative box-border flex min-w-fit cursor-pointer items-center justify-center border border-solid leading-[1.2lh] no-underline transition-colors;
+
+  &[data-size="sm"] {
+    @apply text-interactive-sm min-h-[25px] gap-x-2 rounded-sm px-8 py-[2px] font-semibold data-[no-label]:size-[25px];
+
+    .icon {
+      @apply size-19;
+    }
+  }
+
+  &[data-size="md"] {
+    @apply text-interactive-md min-h-[35px] gap-x-4 rounded-sm px-12 py-[6px] font-semibold data-[no-label]:size-[35px];
+
+    .icon {
+      @apply size-21;
+    }
+  }
+
+  &[data-size="lg"] {
+    @apply text-interactive-lg min-h-[45px] gap-x-6 rounded-md px-24 py-[9px] font-semibold data-[no-label]:size-[45px];
+
+    .icon {
+      @apply size-25;
+    }
+  }
+
+  &[data-no-label="true"] {
+    @apply p-0;
+  }
+
+  &[data-fill="solid"][data-color="primary"] {
+    @apply text-gray-50-dynamic @light:border-black @light:bg-black @dark:border-gray-50 @dark:bg-gray-50;
+
+    .icon {
+      @apply @light:text-gray-300 @dark:text-gray-700;
+    }
+
+    &:hover,
+    &[data-state="hover"],
+    &[data-state="loading"] {
+      @apply @light:border-gray-800 @light:bg-gray-800 @dark:border-white @dark:bg-white;
+    }
+
+    &:active,
+    &[data-state="active"] {
+      @apply @light:border-black @light:bg-black @dark:border-gray-50 @dark:bg-gray-50;
+    }
+  }
+
+  &[data-fill="solid"][data-color="accent"] {
+    @apply text-cyan-900 @light:border-cyan-300 @light:bg-cyan-300 @dark:border-cyan-400 @dark:bg-cyan-400;
+
+    .icon {
+      @apply text-cyan-600;
+    }
+
+    &:hover,
+    &[data-state="hover"],
+    &[data-state="loading"] {
+      @apply @light:border-cyan-200 @light:bg-cyan-200 @dark:border-cyan-200 @dark:bg-cyan-200;
+    }
+
+    &:active,
+    &[data-state="active"] {
+      @apply @light:border-cyan-300 @light:bg-cyan-300 @dark:border-cyan-400 @dark:bg-cyan-400;
+    }
+  }
+
+  &[data-fill="solid"][data-color="brand"] {
+    @apply border-red-500 bg-red-500 text-black;
+
+    .icon {
+      @apply text-red-800;
+    }
+
+    &:hover,
+    &[data-state="hover"],
+    &[data-state="loading"] {
+      @apply border-red-400 bg-red-400;
+    }
+
+    &:active,
+    &[data-state="active"] {
+      @apply border-red-500 bg-red-500;
+    }
+  }
+
+  &[data-fill="solid"][data-color="gray"] {
+    @apply @light:border-white @light:bg-white @light:text-gray-900 @dark:border-gray-900 @dark:bg-gray-900 @dark:text-gray-100;
+
+    .icon {
+      @apply @light:text-gray-600 @dark:text-gray-400;
+    }
+
+    &:hover,
+    &[data-state="hover"],
+    &[data-state="loading"] {
+      @apply @light:border-gray-200 @light:bg-gray-200 @dark:border-gray-800 @dark:bg-gray-800;
+    }
+
+    &:active,
+    &[data-state="active"] {
+      @apply @light:border-white @light:bg-white @dark:border-gray-900 @dark:bg-gray-900;
+    }
+  }
+
+  &[data-fill="outline"][data-color="accent"] {
+    @apply isolate border-0 bg-transparent @light:border-cyan-400 @light:text-cyan-700 @dark:border-cyan-800 @dark:text-cyan-100;
+
+    .icon {
+      @apply @light:text-cyan-600 @dark:text-cyan-300;
+    }
+
+    &:hover,
+    &[data-state="hover"],
+    &[data-state="loading"] {
+      @apply @light:border-cyan-200 @light:bg-cyan-200 @dark:border-cyan-700 @dark:bg-cyan-700 @dark:text-white;
+    }
+
+    &:active,
+    &[data-state="active"] {
+      @apply @light:border-cyan-300 @light:bg-cyan-300 @dark:border-cyan-400 @dark:bg-cyan-400 @dark:text-cyan-700;
+
+      .icon {
+        @apply text-cyan-700;
+      }
+    }
+  }
+
+  &[data-fill="outline"][data-color="gray"] {
+    @apply border-border-subtle bg-transparent text-fg-base;
+
+    .icon {
+      @apply @light:text-gray-600 @dark:text-gray-400;
+    }
+
+    &:hover,
+    &[data-state="hover"],
+    &[data-state="loading"] {
+      @apply @light:border-gray-200 @light:bg-gray-200 @dark:border-gray-800 @dark:bg-gray-800;
+    }
+
+    &:active,
+    &[data-state="active"] {
+      @apply @light:border-white @light:bg-white @dark:border-gray-900 @dark:bg-gray-900;
+    }
+  }
+
+  &[data-fill="ghost"] {
+    @apply border-transparent bg-transparent @light:text-gray-900 @dark:text-gray-100;
+
+    .icon {
+      @apply @light:text-gray-600 @dark:text-gray-400;
+    }
+
+    &:hover,
+    &[data-state="hover"],
+    &[data-state="loading"] {
+      @apply @light:border-gray-200 @light:bg-gray-200 @dark:border-gray-800 @dark:bg-gray-800;
+    }
+
+    &:active,
+    &[data-state="active"] {
+      @apply @light:border-white @light:bg-white @dark:border-gray-900 @dark:bg-gray-900;
+    }
+  }
+
+  &[data-rounded="true"] {
+    @apply rounded-full;
+  }
+
+  &:focus-visible,
+  &[data-state="focus"] {
+    @apply outline-2 outline-offset-2 outline-bg-inverse-base;
+  }
+
+  &:disabled,
+  &[data-state="disabled"] {
+    @apply !border-dashed !border-gray-400-dynamic !bg-transparent !text-gray-300;
+
+    .icon {
+      @apply !text-gray-300;
+    }
+  }
+}
+
+.icon {
+  @apply inline-block flex-shrink-0 place-items-center content-center;
+
+  & > * {
+    height: 100%;
+    width: 100%;
+  }
+
+  svg[data-icon="spinner"] {
+    @apply animate-spin;
+  }
+
+  .button[data-size="md"] &.iconLeft {
+    @apply -ml-2;
+  }
+
+  .button[data-size="md"] &.iconRight {
+    @apply -mr-2;
+  }
+
+  .button[data-size="lg"] &.iconLeft {
+    @apply -ml-4;
+  }
+
+  .button[data-size="lg"] &.iconRight {
+    @apply -mr-4;
+  }
+}
+
+:global([data-rebrand="true"]) {
+  .button {
+    @apply !rounded-full !font-normal !uppercase !transition-none !duration-0;
+  }
+
+  .button[data-fill="solid"][data-color="brand"] {
+    @apply !bg-[var(--brand)] !text-black !border-[var(--brand)];
+
+    --button-icon-color: currentColor !important;
+
+    &:hover,
+    &[data-state="hover"] {
+      @apply !bg-black-dynamic !text-[var(--brand)] !border-black-dynamic;
+    }
+
+    &:active,
+    &[data-state="active"] {
+      @apply !bg-[var(--brand)] !text-black;
+    }
+
+    &:disabled,
+    &[data-state="disabled"],
+    &[aria-disabled="true"] {
+      @apply !text-fg-dim !bg-transparent !border-dashed !border-[var(--brand)];
+
+      --button-icon-color: currentColor !important;
+    }
+  }
+
+  .button[data-fill="solid"][data-color="primary"] {
+    @apply border !border-black-dynamic !bg-black-dynamic !text-white-dynamic;
+
+    &:hover,
+    &[data-state="hover"] {
+      @apply !text-black-dynamic !bg-white-dynamic;
+    }
+
+    &:active,
+    &[data-state="active"] {
+      @apply border !border-black-dynamic !bg-black-dynamic !text-white-dynamic;
+    }
+
+    &:disabled,
+    &[data-state="disabled"],
+    &[aria-disabled="true"] {
+      @apply !text-fg-dim !bg-transparent !border-dashed !border-gray-400-dynamic;
+    }
+  }
+
+  .button[data-fill="solid"][data-color="primary-inverse"] {
+    @apply border !border-white-dynamic !bg-white-dynamic !text-black-dynamic;
+
+    &:hover,
+    &[data-state="hover"] {
+      @apply !text-white-dynamic !bg-black-dynamic;
+    }
+
+    &:active,
+    &[data-state="active"] {
+      @apply border !border-white-dynamic !bg-white-dynamic !text-black-dynamic;
+    }
+
+    &:disabled,
+    &[data-state="disabled"],
+    &[aria-disabled="true"] {
+      @apply !text-fg-dim !bg-transparent !border-dashed !border-gray-400-dynamic;
+    }
+  }
+
+  .button[data-fill="solid"][data-color="black"] {
+    @apply border !border-black !bg-black !text-white;
+
+    &:hover,
+    &[data-state="hover"] {
+      @apply !text-black !border-white !bg-white;
+    }
+
+    &:active,
+    &[data-state="active"] {
+      @apply border !border-black !bg-black !text-white;
+    }
+
+    &:disabled,
+    &[data-state="disabled"],
+    &[aria-disabled="true"] {
+      @apply !text-fg-dim !bg-transparent !border-dashed !border-gray-400-dynamic;
+    }
+  }
+
+  .button[data-fill="solid"][data-color="white"] {
+    @apply border !border-white !bg-white !text-black;
+
+    &:hover,
+    &[data-state="hover"] {
+      @apply !text-white !bg-black !border-black;
+    }
+
+    &:active,
+    &[data-state="active"] {
+      @apply border !border-white !bg-white !text-black;
+    }
+
+    &:disabled,
+    &[data-state="disabled"],
+    &[aria-disabled="true"] {
+      @apply !text-fg-dim !bg-transparent !border-dashed !border-gray-400-dynamic;
+    }
+  }
+
+  .button[data-fill="solid"][data-color="accent"] {
+    @apply border !border-blue-600 !bg-blue-600 !text-white;
+
+    &:hover,
+    &[data-state="hover"] {
+      @apply !bg-white-dynamic !text-blue-600;
+    }
+
+    &:active,
+    &[data-state="active"] {
+      @apply border !border-blue-600 !bg-blue-600 !text-white;
+    }
+
+    &:disabled,
+    &[data-state="disabled"],
+    &[aria-disabled="true"] {
+      @apply !text-fg-dim !bg-transparent !border-dashed !border-blue-600;
+    }
+  }
+
+  .button[data-fill="solid"][data-color="gray"] {
+    @apply border !border-gray-200-dynamic !bg-gray-200-dynamic !text-black-dynamic;
+
+    &:hover,
+    &[data-state="hover"] {
+      @apply !border-gray-300-dynamic !bg-gray-300-dynamic;
+    }
+
+    /* &:active,
+    &[data-state="active"] {
+    } */
+
+    &:disabled,
+    &[data-state="disabled"],
+    &[aria-disabled="true"] {
+      @apply !text-fg-dim !bg-transparent !border-dashed !border-gray-400-dynamic;
+    }
+  }
+
+  .button[data-fill="outline"] {
+    @apply border !border-black-dynamic !bg-transparent !text-black-dynamic;
+
+    &:hover,
+    &[data-state="hover"] {
+      @apply !bg-black-dynamic !text-white-dynamic;
+    }
+
+    /* &:active,
+    &[data-state="active"] {
+    } */
+
+    &:disabled,
+    &[data-state="disabled"],
+    &[aria-disabled="true"] {
+      @apply !text-fg-dim !bg-transparent !border-dashed !border-gray-400-dynamic;
+    }
+  }
+
+  .button[data-fill="ghost"] {
+    @apply border !border-transparent !bg-transparent !text-black-dynamic;
+
+    &:hover,
+    &[data-state="hover"] {
+      @apply !bg-gray-200-dynamic !border-gray-200-dynamic;
+    }
+
+    /* &:active,
+    &[data-state="active"] {
+    } */
+
+    &:disabled,
+    &[data-state="disabled"],
+    &[aria-disabled="true"] {
+      @apply !text-fg-dim !bg-transparent !border-dashed !border-gray-400-dynamic;
+    }
+  }
+
+  .icon.iconLeft,
+  .icon.iconRight {
+    color: var(--button-icon-color) !important;
+  }
+}

package/src/components/Button.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import cn from "clsx"
+import { Link } from "./helpers/Link"
+import { SanityIcon, type SanityIconName } from "./helpers/SanityIcon"
+import { useLinkWithRef } from "./helpers/useLinkWithRef"
+import css from "./Button.module.css"
+
+type AnchorOrButton = Omit<Parameters<typeof Link>[0], "type" | "href"> &
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+
+export namespace Button {
+  export type State =
+    | "default"
+    | "hover"
+    | "active"
+    | "disabled"
+    | "loading"
+    | undefined
+
+  export type Fill = "solid" | "outline" | "ghost" | undefined
+  export type Props = AnchorOrButton & {
+    as?: "button" | "a" | "div" | "span" | "external"
+    size?: "sm" | "md" | "lg"
+    fill?: Fill
+    color?:
+      | "primary"
+      | "brand"
+      | "accent"
+      | "gray"
+      | "primary-inverse"
+      | "white"
+      | "black"
+    state?: State
+    iconLeft?: SanityIconName | React.ReactNode
+    iconRight?: SanityIconName | React.ReactNode
+    children?: React.ReactNode
+    href?: string
+    rounded?: boolean
+    injectRef?: boolean
+    disableLinkRef?: boolean
+  }
+}
+
+export function Button({
+  as,
+  size,
+  fill,
+  color,
+  state,
+  iconLeft,
+  iconRight,
+  children,
+  rounded,
+  injectRef = true,
+  disableLinkRef = false,
+  ...props
+}: Button.Props) {
+  let href = props.href
+  const hrefWithRef = useLinkWithRef(props.href)
+
+  if (injectRef && !disableLinkRef) href = hrefWithRef
+
+  size ??= "md"
+  fill ??= "solid"
+  color ??= "primary"
+
+  if (state === "loading") {
+    if (iconLeft && !iconRight) iconLeft = "spinner"
+    else if (iconRight && !iconLeft) iconRight = "spinner"
+    else iconLeft = "spinner"
+  }
+
+  if (typeof iconLeft === "string") {
+    iconLeft = <SanityIcon icon={iconLeft as SanityIconName} />
+  }
+
+  if (typeof iconRight === "string") {
+    iconRight = <SanityIcon icon={iconRight as SanityIconName} />
+  }
+
+  let Element: React.ElementType = "div"
+  if (as === "a") Element = Link
+  else if (as === "external") Element = "a"
+  else if (as) Element = as
+  else if (href) Element = Link
+  else if (props.onClick) Element = "button"
+
+  return (
+    <Element
+      {...props}
+      className={cn(css.button, props.className)}
+      data-size={size}
+      data-fill={fill}
+      data-color={color}
+      data-state={state}
+      data-rounded={rounded}
+      data-no-label={children ? undefined : true}
+      href={href}
+    >
+      {iconLeft && (
+        <span className={cn(css.icon, css.iconLeft)}>{iconLeft}</span>
+      )}
+      {children}
+      {iconRight && (
+        <span className={cn(css.icon, css.iconRight)}>{iconRight}</span>
+      )}
+    </Element>
+  )
+}

package/src/components/Card.module.css

@@ -0,0 +1,19 @@
+.card {
+  @apply overflow-clip transition-all hover:bg-bg-strong;
+
+  &[data-border="true"] {
+    @apply border border-border-subtle hover:shadow-3;
+  }
+
+  &[data-rounded="sm"] {
+    @apply rounded-sm;
+  }
+
+  &[data-rounded="md"] {
+    @apply rounded-md;
+  }
+
+  &[data-rounded="lg"] {
+    @apply rounded-lg;
+  }
+}

package/src/components/Card.tsx

@@ -0,0 +1,18 @@
+import cn from "clsx"
+import { Children, cloneElement } from "react"
+import css from "./Card.module.css"
+
+type CardProps = {
+  children: React.ReactElement
+  rounded?: "none" | "sm" | "md" | "lg"
+  border?: boolean
+}
+
+export function Card(props: CardProps) {
+  const child = Children.only(props.children)
+  return cloneElement(child, {
+    className: cn(child.props.className, css.card),
+    "data-rounded": props.rounded ?? "md",
+    "data-border": props.border ?? true,
+  })
+}

package/src/components/Checkbox.module.css

@@ -0,0 +1,82 @@
+@layer shared {
+  .wrapper {
+    --theme-colors-checkbox-fg: theme("colors.fg-strong");
+    --theme-colors-checkbox-bg: theme("colors.bg-strong");
+    --theme-colors-checkbox-bg-checked: theme("colors.fg-strong");
+    --theme-colors-checkbox-border: theme("colors.border-subtle");
+    --theme-colors-checkbox-border-hover: theme("colors.border-subtle");
+    --theme-colors-checkbox-icon: theme("colors.bg-strong");
+    --theme-colors-checkbox-outline: transparent;
+    --theme-colors-checkbox-outline-hover: theme("colors.bg-dim");
+    --theme-colors-checkbox-outline-focus: theme("colors.fg-strong");
+  }
+}
+
+.wrapper {
+  @apply flex items-start gap-x-8;
+}
+
+.input {
+  @apply sr-only;
+}
+
+.box {
+  @apply flex-shrink-0 rounded-sm border outline outline-0 outline-transparent transition-all;
+
+  background: var(--theme-colors-checkbox-bg);
+  border-color: var(--theme-colors-checkbox-border);
+
+  .wrapper[data-size="md"] & {
+    @apply h-[19px] w-[19px];
+  }
+
+  .wrapper[data-size="lg"] & {
+    @apply h-[21px] w-[21px];
+  }
+
+  .wrapper:hover &,
+  .wrapper[data-state="hover"] & {
+    @apply outline-4;
+
+    border-color: var(--theme-colors-checkbox-border-hover);
+    outline-color: var(--theme-colors-checkbox-outline-hover);
+  }
+
+  .input:focus + &,
+  .wrapper[data-state="focus"] & {
+    @apply outline-2 outline-offset-2;
+
+    border-color: var(--theme-colors-checkbox-border-hover);
+    outline-color: var(--theme-colors-checkbox-outline-focus);
+  }
+
+  .input:checked + &,
+  .wrapper[data-state="checked"] & {
+    background: var(--theme-colors-checkbox-bg-checked);
+  }
+}
+
+.label {
+  @apply -mt-[1px];
+
+  color: var(--theme-colors-checkbox-fg);
+
+  .wrapper[data-size="md"] & {
+    @apply text-interactive-md;
+  }
+
+  .wrapper[data-size="lg"] & {
+    @apply text-interactive-lg;
+  }
+}
+
+.icon {
+  @apply h-full w-full opacity-0 transition-opacity;
+
+  color: var(--theme-colors-checkbox-icon);
+
+  .input:checked + .box &,
+  .wrapper[data-state="checked"] & {
+    @apply opacity-100;
+  }
+}