@sanity/sanity-id 0.0.0

package/src/components/LinkCTA.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import cn from "clsx"
+import { isInternalHref } from "../utils"
+import { AddRefParam } from "./helpers/AddRefParam"
+import { Link } from "./helpers/Link"
+import css from "./LinkCTA.module.css"
+
+type AnchorOrDivAttributes =
+  | ({ href: string } & React.AnchorHTMLAttributes<HTMLAnchorElement>)
+  | ({ href?: undefined } & React.HTMLAttributes<HTMLDivElement>)
+
+export namespace LinkCTA {
+  export type Props = AnchorOrDivAttributes & {
+    children?: React.ReactNode
+    arrowDirection?: "right" | "top-right"
+    arrowPosition?: "left" | "right"
+    arrowColor?: "accent" | "base"
+    size?: "md" | "lg"
+    state?: "default" | "hover" | "focus" | "active"
+    external?: boolean
+  }
+}
+
+export function LinkCTA({
+  arrowColor,
+  arrowDirection,
+  arrowPosition,
+  children,
+  size,
+  state,
+  href,
+  external,
+  ...props
+}: LinkCTA.Props) {
+  arrowColor ??= "base"
+  arrowDirection ??= "right"
+  arrowPosition ??= "left"
+  size ??= "md"
+
+  let Element: React.ElementType = "div"
+  const internal = isInternalHref(href ?? "")
+
+  if (href && !internal) {
+    arrowDirection = "top-right"
+  }
+
+  if (href) Element = external ? "a" : Link
+
+  return (
+    <AddRefParam>
+      <Element
+        {...props}
+        className={cn(props.className, css.linkCta)}
+        data-arrow-direction={arrowDirection}
+        data-arrow-color={arrowColor}
+        data-arrow-position={arrowPosition}
+        data-size={size}
+        data-state={state}
+        // @ts-ignore
+        href={href}
+      >
+        {arrowPosition === "left" && (
+          <span className={css.arrow}>
+            <span className={css.icon}>→</span>
+          </span>
+        )}
+        {children}
+        {arrowPosition === "right" && (
+          <span className={css.arrow}>
+            <span className={css.icon}>→</span>
+          </span>
+        )}
+      </Element>
+    </AddRefParam>
+  )
+}

package/src/components/Radio.module.css

@@ -0,0 +1,91 @@
+@layer shared {
+  .wrapper {
+    --theme-colors-radio-fg: theme("colors.fg-strong");
+    --theme-colors-radio-bg: theme("colors.bg-strong");
+    --theme-colors-radio-bg-checked: theme("colors.fg-strong");
+    --theme-colors-radio-border: theme("colors.border-subtle");
+    --theme-colors-radio-border-hover: theme("colors.border-subtle");
+    --theme-colors-radio-icon: theme("colors.bg-strong");
+    --theme-colors-radio-outline: transparent;
+    --theme-colors-radio-outline-hover: theme("colors.bg-dim");
+    --theme-colors-radio-outline-focus: theme("colors.fg-strong");
+  }
+}
+
+.wrapper {
+  @apply flex items-start gap-x-8;
+}
+
+.input {
+  @apply sr-only;
+}
+
+.box {
+  @apply flex flex-shrink-0 items-center justify-center rounded-full border outline outline-0 outline-transparent transition-all;
+
+  background: var(--theme-colors-radio-bg);
+  border-color: var(--theme-colors-radio-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-radio-border-hover);
+    outline-color: var(--theme-colors-radio-outline-hover);
+  }
+
+  .input:focus + &,
+  .wrapper[data-state="focus"] & {
+    @apply outline-2 outline-offset-2;
+
+    border-color: var(--theme-colors-radio-border-hover);
+    outline-color: var(--theme-colors-radio-outline-focus);
+  }
+
+  .input:checked + &,
+  .wrapper[data-state="checked"] & {
+    background: var(--theme-colors-radio-bg-checked);
+  }
+}
+
+.label {
+  @apply -mt-[1px];
+
+  color: var(--theme-colors-radio-fg);
+
+  .wrapper[data-size="md"] {
+    @apply text-interactive-md;
+  }
+
+  .wrapper[data-size="lg"] {
+    @apply text-interactive-lg;
+  }
+}
+
+.box::after {
+  @apply rounded-full opacity-0 transition-opacity;
+
+  background: var(--theme-colors-radio-icon);
+  content: "";
+
+  .input:checked + &,
+  .wrapper[data-state="checked"] & {
+    @apply opacity-100;
+  }
+
+  .wrapper[data-size="md"] & {
+    @apply h-[7px] w-[7px];
+  }
+
+  .wrapper[data-size="lg"] & {
+    @apply h-[9px] w-[9px];
+  }
+}

package/src/components/Radio.tsx

@@ -0,0 +1,33 @@
+import cn from "clsx"
+import css from "./Radio.module.css"
+
+export type RadioProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "type" | "size"
+> & {
+  size?: "md" | "lg"
+  state?: "hover" | "focus" | "checked"
+  children?: React.ReactNode
+}
+
+export function Radio({
+  size,
+  state,
+  className,
+  children,
+  ...props
+}: RadioProps) {
+  size ??= "md"
+
+  return (
+    <label
+      className={cn(className, css.wrapper)}
+      data-state={state}
+      data-size={size}
+    >
+      <input {...props} className={css.input} type="radio" />
+      <div className={css.box} />
+      <p className={css.label}>{children}</p>
+    </label>
+  )
+}

package/src/components/RadioSwitch.module.css

@@ -0,0 +1,125 @@
+@layer shared {
+  .fieldset {
+    --theme-colors-radio-switch-fg: theme("colors.fg-strong");
+    --theme-colors-radio-switch-fg-icon: theme("colors.fg-strong");
+    --theme-colors-radio-switch-fg-icon-hover: theme("colors.fg-strong");
+    --theme-colors-radio-switch-bg-icon: transparent;
+    --theme-colors-radio-switch-bg-icon-hover: theme("colors.border-subtle");
+    --theme-colors-radio-switch-bg-icon-active: theme("colors.bg-strong");
+    --theme-colors-radio-switch-border: theme("colors.border-subtle");
+    --theme-colors-radio-switch-outline: theme("colors.fg-strong");
+    --theme-colors-radio-switch-border-tooltip: theme("colors.border-subtle");
+    --theme-colors-radio-switch-bg-tooltip: theme("colors.bg-strong");
+    --theme-colors-radio-switch-fg-tooltip: theme("colors.fg-base");
+  }
+}
+
+.fieldset {
+  @apply relative isolate box-border flex w-fit rounded-full border;
+
+  border-color: var(--theme-colors-radio-switch-border);
+
+  &[data-size="md"] {
+    @apply gap-x-6 p-4;
+  }
+
+  &[data-size="sm"] {
+    @apply gap-x-4 p-2;
+  }
+
+  &:disabled {
+    @apply pointer-events-none cursor-default opacity-50;
+  }
+}
+
+.indicator {
+  @apply absolute -z-10 box-border origin-center rounded-full opacity-0;
+
+  background: var(--theme-colors-radio-switch-bg-icon-active);
+  transition:
+    translate 350ms ease,
+    opacity 200ms 350ms ease;
+
+  .fieldset[data-size="md"] & {
+    @apply left-4 top-4 size-[30px];
+
+    translate: calc(36px * var(--index)) 0;
+  }
+
+  .fieldset[data-size="sm"] & {
+    @apply left-0 top-0 size-25;
+
+    translate: calc(25px * var(--index)) 0;
+  }
+
+  .radio:checked ~ & {
+    @apply opacity-100;
+  }
+
+  .radio:focus-visible ~ & {
+    @apply outline outline-2 outline-offset-2;
+
+    outline-color: var(--theme-colors-radio-switch-outline);
+  }
+}
+
+.radio {
+  @apply sr-only;
+}
+
+.icon {
+  @apply relative box-border cursor-pointer rounded-full transition-colors text-fg-dim;
+
+  .fieldset[data-size="md"] & {
+    @apply size-[30px] p-6;
+  }
+
+  .fieldset[data-size="sm"] & {
+    @apply size-21 p-0;
+  }
+
+  &:hover {
+    @apply text-fg-base;
+
+    background: var(--theme-colors-radio-switch-bg-icon-hover);
+    color: var(--theme-colors-radio-switch-fg-icon-hover);
+  }
+
+  &:active,
+  .radio:checked + & {
+    @apply transition-colors duration-75;
+
+    color: var(--theme-colors-radio-switch-fg-icon-active);
+  }
+}
+
+.tooltip {
+  @apply label-sm py-4 px-6 absolute left-1/2 top-0 whitespace-nowrap rounded-full border opacity-0 transition-opacity;
+
+  background: var(--theme-colors-radio-switch-bg-tooltip);
+  border-color: var(--theme-colors-radio-switch-border-tooltip);
+  color: var(--theme-colors-radio-switch-fg-tooltip);
+  translate: -50% calc(-100% - 2px);
+
+  .radio:focus-visible + .icon &,
+  .icon:hover & {
+    @apply opacity-100;
+  }
+}
+
+:global([data-rebrand="true"]) {
+  .fieldset {
+    --theme-colors-radio-switch-fg: theme("colors.fg-strong");
+    --theme-colors-radio-switch-fg-icon: theme("colors.gray-500");
+    --theme-colors-radio-switch-fg-icon-hover: theme("colors.fg-strong");
+    --theme-colors-radio-switch-fg-icon-active: theme("colors.bg-strong");
+    --theme-colors-radio-switch-bg-icon: transparent;
+    --theme-colors-radio-switch-bg-icon-hover: transparent;
+    --theme-colors-radio-switch-bg-icon-active: theme("colors.gray-500");
+    --theme-colors-radio-switch-border: transparent;
+    --theme-colors-radio-switch-outline: theme("colors.fg-strong");
+    --theme-colors-radio-switch-border-tooltip: theme("colors.border-subtle");
+    --theme-colors-radio-switch-bg-tooltip: theme("colors.bg-strong");
+    --theme-colors-radio-switch-fg-tooltip: theme("colors.fg-base");
+  }
+}

package/src/components/RadioSwitch.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import { Fragment, useEffect, useRef, useState } from "react"
+import cn from "clsx"
+import { slugify } from "../utils"
+import { SanityIcon, SanityIconName } from "./helpers/SanityIcon"
+import css from "./RadioSwitch.module.css"
+
+export type RadioSwitchValue = {
+  label: string
+  id?: string
+  value: string
+  icon: SanityIconName
+}
+
+export type RadioSwitchProps = Omit<
+  React.FieldsetHTMLAttributes<HTMLFieldSetElement>,
+  "size" | "onChange"
+> & {
+  name: string
+  options: RadioSwitchValue[]
+  value?: string
+  defaultValue?: string
+  legend: string
+  state?: "hover" | "focus" | "checked"
+  size?: "sm" | "md"
+  forceTooltip?: boolean
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+}
+
+export function RadioSwitch({
+  className,
+  defaultValue,
+  onChange: onChangeProp,
+  name,
+  size,
+  state,
+  legend,
+  value,
+  options,
+  ...props
+}: RadioSwitchProps) {
+  const indicatorRef = useRef<HTMLDivElement>(null)
+  const [active, setIndex] = useState<string>(() =>
+    findActive(options, value, defaultValue)
+  )
+
+  useEffect(() => {
+    setIndex(findActive(options, value, defaultValue))
+  }, [value, options, defaultValue])
+
+  size ??= "md"
+
+  function onChange(event: React.ChangeEvent<HTMLInputElement>) {
+    indicatorRef.current?.animate(
+      [{ scale: "1" }, { scale: "1.5 0.5" }, { scale: "1" }],
+      {
+        duration: 350,
+        easing: "ease-out",
+      }
+    )
+    setIndex(event.target.dataset.index ?? "")
+    onChangeProp?.(event)
+  }
+
+  return (
+    <fieldset
+      {...props}
+      className={cn(className, css.fieldset)}
+      style={{ "--index": active }}
+      data-state={state}
+      data-size={size}
+      suppressHydrationWarning
+    >
+      {legend && <legend className="sr-only">{legend}</legend>}
+      {options.map((option, index) => (
+        <Fragment key={option.value}>
+          <input
+            type="radio"
+            id={createId(name, option)}
+            name={name}
+            className={css.radio}
+            value={option.value ?? ""}
+            data-index={index}
+            onChange={onChange}
+            checked={value ? option.value === value : false}
+            defaultChecked={
+              !value && defaultValue ? option.value === defaultValue : undefined
+            }
+          />
+          <label
+            className={css.icon}
+            htmlFor={createId(name, option)}
+            data-force-tooltip={String(index) === active}
+            suppressHydrationWarning
+          >
+            <SanityIcon icon={option.icon} className={css.icona} />
+            <div className={css.tooltip}>{option.label}</div>
+          </label>
+        </Fragment>
+      ))}
+      <div className={css.indicator} ref={indicatorRef} />
+    </fieldset>
+  )
+}
+
+function createId(name: string, value: RadioSwitchValue) {
+  if (value.id) return value.id
+  return slugify(`${name}-${value.value}`)
+}
+
+function findActive(
+  options: RadioSwitchValue[],
+  value?: string,
+  defaultValue?: string
+): string {
+  let index = options.findIndex((o) => !!value && o.value === value)
+  if (index >= 0) return index.toString()
+  index = options.findIndex((o) => !!defaultValue && o.value === defaultValue)
+  if (index >= 0) return index.toString()
+  return ""
+}

package/src/components/Select.module.css

@@ -0,0 +1,35 @@
+@layer shared {
+  .wrapper {
+    --theme-colors-select-icon: theme("colors.fg-dim");
+  }
+}
+
+.select {
+  @apply min-w-full appearance-none;
+
+  &[data-size="md"] {
+    @apply pr-24;
+  }
+
+  &[data-size="lg"] {
+    @apply pr-32;
+  }
+}
+
+.wrapper {
+  @apply relative flex items-center;
+}
+
+.icon {
+  @apply pointer-events-none absolute;
+
+  color: var(--theme-colors-select-icon);
+
+  .select[data-size="md"] + & {
+    @apply right-2 h-[21px];
+  }
+
+  .select[data-size="lg"] + & {
+    @apply right-4 h-[25px];
+  }
+}

package/src/components/Select.tsx

@@ -0,0 +1,28 @@
+import cn from "clsx"
+import { SanityIcon } from "./helpers/SanityIcon"
+import inputCss from "./Input.module.css"
+import css from "./Select.module.css"
+
+export type SelectProps = Omit<
+  React.SelectHTMLAttributes<HTMLSelectElement>,
+  "size"
+> & {
+  size?: "md" | "lg"
+  state?: "hover" | "focus"
+}
+
+export function Select({ size, state, ...props }: SelectProps) {
+  size ??= "md"
+
+  return (
+    <div className={cn(css.wrapper, props.className)}>
+      <select
+        {...props}
+        className={cn(inputCss.input, css.select)}
+        data-size={size}
+        data-state={state}
+      />
+      <SanityIcon icon="select" className={css.icon} />
+    </div>
+  )
+}

package/src/components/Switch.module.css

@@ -0,0 +1,112 @@
+@layer shared {
+  .wrapper {
+    --theme-colors-switch-fg: theme("colors.fg-strong");
+    --theme-colors-switch-thumb-track-off: theme("colors.border-base");
+    --theme-colors-switch-thumb-track-off-hover: theme("colors.border-strong");
+    --theme-colors-switch-thumb-track-on: theme("colors.fg-strong");
+    --theme-colors-switch-thumb-indicator: theme("colors.bg-strong");
+    --theme-colors-switch-outline: transparent;
+    --theme-colors-switch-outline-hover: theme("colors.bg-dim");
+    --theme-colors-switch-outline-focus: theme("colors.fg-strong");
+  }
+}
+
+.wrapper {
+  @apply flex items-center gap-x-8;
+}
+
+.input {
+  @apply sr-only;
+}
+
+.thumb {
+  @apply relative isolate cursor-pointer rounded-full outline-0 transition-all;
+
+  background: var(--theme-colors-switch-thumb-track-off);
+  outline-color: var(--theme-colors-switch-outline);
+
+  .wrapper:hover &,
+  .wrapper[data-state="hover"] & {
+    background: var(--theme-colors-switch-thumb-track-off-hover);
+    outline: 4px solid var(--theme-colors-switch-outline-hover);
+  }
+
+  .input:checked + & {
+    background: var(--theme-colors-switch-thumb-track-on);
+  }
+
+  .input:focus &,
+  .wrapper[data-state="focus"] & {
+    outline: 2px solid var(--theme-colors-switch-outline-focus);
+    outline-offset: 2px;
+  }
+
+  .wrapper[data-size="md"] & {
+    @apply h-[19px] w-[35px];
+  }
+
+  .wrapper[data-size="lg"] & {
+    @apply h-21 w-[37px];
+  }
+}
+
+.thumb::before {
+  @apply absolute left-[3px] top-[3px] box-border aspect-square h-[calc(100%-6px)] rounded-full border-[3px] border-solid border-transparent transition-all;
+
+  animation: toggle-off 0ms ease 0ms forwards;
+  background: var(--theme-colors-switch-thumb-indicator);
+  content: "";
+
+  .input:checked + & {
+    animation: toggle-on 0ms ease 0ms forwards;
+  }
+
+  .input:focus + &,
+  .wrapper:hover & {
+    animation-duration: 200ms;
+  }
+}
+
+.label {
+  color: var(--theme-colors-switch-fg);
+
+  .wrapper[data-size="md"] & {
+    @apply text-interactive-md;
+  }
+
+  .wrapper[data-size="lg"] & {
+    @apply text-interactive-lg;
+  }
+}
+
+@keyframes toggle-on {
+  0% {
+    scale: 1;
+    translate: 0 0;
+  }
+
+  50% {
+    scale: 1.4 0.6;
+  }
+
+  100% {
+    scale: 1;
+    translate: 16px 0;
+  }
+}
+
+@keyframes toggle-off {
+  0% {
+    scale: 1;
+    translate: 16px 0;
+  }
+
+  50% {
+    scale: 1.4 0.6;
+  }
+
+  100% {
+    scale: 1;
+    translate: 0 0;
+  }
+}

package/src/components/Switch.tsx

@@ -0,0 +1,33 @@
+import cn from "clsx"
+import css from "./Switch.module.css"
+
+export type SwitchProps = Omit<
+  Raect.InputHTMLAttributes<HTMLInputElement>,
+  "size"
+> & {
+  children: React.ReactNode
+  state?: "hover" | "focus" | "checked"
+  size?: "md" | "lg"
+}
+
+export function Switch({
+  children,
+  className,
+  size,
+  state,
+  ...props
+}: SwitchProps) {
+  size ??= "md"
+
+  return (
+    <label
+      className={cn(className, css.wrapper)}
+      data-size={size}
+      data-state={state}
+    >
+      <input {...props} className={css.input} type="checkbox" />
+      <div className={css.thumb} />
+      <div className={css.label}>{children}</div>
+    </label>
+  )
+}

package/src/components/TextArea.module.css

@@ -0,0 +1,17 @@
+@layer shared {
+  .wrapper {
+    --theme-colors-select-icon: theme("colors.fg-dim");
+  }
+}
+
+.textarea {
+  @apply min-w-full appearance-none;
+
+  &[data-size="md"] {
+    @apply text-interactive-md min-h-64 p-8 leading-normal;
+  }
+
+  &[data-size="lg"] {
+    @apply text-interactive-lg min-h-96 p-12 leading-normal;
+  }
+}

package/src/components/TextArea.tsx

@@ -0,0 +1,30 @@
+import cn from "clsx"
+import { forwardRef } from "react"
+import inputCss from "./Input.module.css"
+import css from "./TextArea.module.css"
+
+export type InputProps = Omit<
+  React.InputHTMLAttributes<HTMLTextAreaElement>,
+  "size"
+> & {
+  size?: "md" | "lg"
+  state?: "hover" | "focus"
+}
+
+export const TextArea = forwardRef<HTMLTextAreaElement, InputProps>(
+  ({ size, state, ...props }, ref) => {
+    size ??= "md"
+
+    return (
+      <textarea
+        {...props}
+        ref={ref}
+        className={cn(inputCss.input, css.textarea, props.className)}
+        data-size={size}
+        data-state={state}
+      />
+    )
+  }
+)
+
+TextArea.displayName = "TextArea"