@sanity/sanity-id 1.0.1 → 1.1.0

package/components.css

@@ -18,3 +18,4 @@
 @import "./dist/components/Table.css";
 @import "./dist/components/Testimonial.css";
 @import "./dist/components/Textarea.css";
+@import "./dist/components/TextCard.css";

package/dist/components/Badge.css

@@ -14,4 +14,9 @@
     @apply text-label-md;
     padding: var(--spacing-8);
   }
+  @supports not (text-box-trim: trim-both) {
+    && {
+      line-height: 1;
+    }
+  }
 }

package/dist/components/Breadcrumbs.css

@@ -19,5 +19,5 @@
   @apply text-label-md;
   color: var(--color-fg-base);
   text-decoration: none;
-  @variant hover { text-decoration: underline; }
+  @variant hover { text-decoration-line: underline; }
 }

package/dist/components/Button.css

@@ -23,6 +23,9 @@
     min-height: calc((45 / 16) * 1rem);
     padding: var(--spacing-8) var(--spacing-32);
   }
+  @supports not (text-box-trim: trim-both) {
+    line-height: 1;
+  }
 }
 .Button_button[data-mode=primary] {
   &:hover {
@@ -84,7 +87,6 @@
   }
   &,
   &:active {
-    background-color: var(--color-bg-base);
     border-color: var(--color-bg-inverse-base);
     color: var(--color-fg-base);
   }

package/dist/components/Card.css

@@ -32,6 +32,6 @@
   @apply text-component-heading-md;
   color: var(--color-fg-base);
   .Card_link[href]:hover & {
-    text-decoration: underline;
+    text-decoration-line: underline;
   }
 }

package/dist/components/Chip.css

@@ -29,6 +29,9 @@
 .Chip_text {
   text-box-edge: cap alphabetic;
   text-box-trim: trim-both;
+  @supports not (text-box-trim: trim-both) {
+    line-height: 1;
+  }
 }
 .Chip_icon {
   height: var(--spacing-icon-sm);

package/dist/components/Code.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Code
-} from "./chunk-GOQAK6JJ.js";
+} from "./chunk-CHTYOZV5.js";
 import "./chunk-RC7UR3KP.js";
 import "./chunk-U67V476Y.js";
 export {

package/dist/components/CodeBlock.css

@@ -131,7 +131,6 @@
   }
   &,
   &:active {
-    background-color: var(--color-bg-base);
     border-color: var(--color-bg-inverse-base);
     color: var(--color-fg-base);
   }
@@ -179,6 +178,11 @@
     @apply text-label-md;
     padding: var(--spacing-8);
   }
+  @supports not (text-box-trim: trim-both) {
+    && {
+      line-height: 1;
+    }
+  }
 }
 
 /* src/components/Code.module.css */

package/dist/components/CodeBlock.js

@@ -7,7 +7,7 @@ import "./chunk-K2RGV5MW.js";
 import {
   Code,
   normalizeCode
-} from "./chunk-GOQAK6JJ.js";
+} from "./chunk-CHTYOZV5.js";
 import "./chunk-RC7UR3KP.js";
 import "./chunk-U67V476Y.js";
 

package/dist/components/Eyebrow.js

@@ -1,33 +1,10 @@
 import {
-  LinkCTA
-} from "./chunk-SXBHZTND.js";
+  Eyebrow
+} from "./chunk-TBD76CFH.js";
+import "./chunk-SXBHZTND.js";
 import "./chunk-K2RGV5MW.js";
-import {
-  require_classnames
-} from "./chunk-RC7UR3KP.js";
-import {
-  __toESM
-} from "./chunk-U67V476Y.js";
-
-// src/components/Eyebrow.module.css
-var Eyebrow_default = {
-  wrapper: "Eyebrow_wrapper",
-  eyebrow: "Eyebrow_eyebrow"
-};
-
-// src/components/Eyebrow.tsx
-var import_classnames = __toESM(require_classnames());
-import { jsx, jsxs } from "react/jsx-runtime";
-function Eyebrow({
-  children,
-  className,
-  cta
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: (0, import_classnames.default)(Eyebrow_default.wrapper, className), children: [
-    /* @__PURE__ */ jsx("div", { className: Eyebrow_default.eyebrow, children }),
-    !!cta?.text && /* @__PURE__ */ jsx(LinkCTA, { arrowPosition: "left", arrow: cta.arrow, href: cta.href, children: cta.text })
-  ] });
-}
+import "./chunk-RC7UR3KP.js";
+import "./chunk-U67V476Y.js";
 export {
   Eyebrow
 };

package/dist/components/IconButton.css

@@ -80,7 +80,6 @@
   }
   &,
   &:active {
-    background-color: var(--color-bg-base);
     border-color: var(--color-bg-inverse-base);
     color: var(--color-fg-base);
   }
@@ -128,4 +127,9 @@
     @apply text-label-md;
     padding: var(--spacing-8);
   }
+  @supports not (text-box-trim: trim-both) {
+    && {
+      line-height: 1;
+    }
+  }
 }

package/dist/components/Person.css

@@ -22,6 +22,9 @@
   display: flex;
   flex-direction: column;
   row-gap: var(--spacing-6);
+  @supports not (text-box-trim: trim-both) {
+    row-gap: 0;
+  }
 }
 .Person_name {
   @apply text-detail-md;

package/dist/components/Testimonial.css

@@ -22,6 +22,9 @@
   display: flex;
   flex-direction: column;
   row-gap: var(--spacing-6);
+  @supports not (text-box-trim: trim-both) {
+    row-gap: 0;
+  }
 }
 .Person_name {
   @apply text-detail-md;

package/dist/components/TextCard.css

@@ -0,0 +1,76 @@
+/* src/components/TextCard.module.css */
+@reference "../../tailwind.css";
+.TextCard_textCard {
+  border-top: 1px solid var(--color-border-base);
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--spacing-24);
+  padding-block: var(--spacing-24);
+  @supports not (text-box-trim: trim-both) {
+    row-gap: var(--spacing-16);
+  }
+}
+.TextCard_title {
+  .TextCard_textCard[data-size=sm] & {
+    @apply text-component-heading-sm;
+  }
+  .TextCard_textCard[data-size=md] & {
+    @apply text-component-heading-md;
+  }
+  .TextCard_textCard[data-size=lg] & {
+    @apply text-component-heading-lg;
+  }
+  .TextCard_textCard[href]:hover & {
+    text-decoration-line: underline;
+  }
+}
+.TextCard_description {
+  @apply text-body-sm;
+}
+.TextCard_icon {
+  height: calc(1rem * 35 / 16);
+  width: calc(1rem * 35 / 16);
+}
+
+/* src/components/Eyebrow.module.css */
+@reference "../../tailwind.css";
+.Eyebrow_wrapper {
+  align-items: center;
+  display: flex;
+  column-gap: var(--spacing-12);
+}
+.Eyebrow_eyebrow {
+  @apply text-label-md;
+}
+
+/* src/components/LinkCTA.module.css */
+@reference "../../tailwind.css";
+.LinkCTA_link {
+  @apply text-label-lg;
+  align-items: center;
+  border-radius: var(--radius-full);
+  column-gap: var(--spacing-12);
+  cursor: pointer;
+  display: flex;
+  isolation: isolate;
+  position: relative;
+  &:hover {
+    color: var(--color-white);
+    background-color: var(--color-blue-700);
+  }
+  &:has(.LinkCTA_iconLeft) {
+    padding-right: var(--spacing-12);
+  }
+  &:has(.LinkCTA_iconRight) {
+    padding-left: var(--spacing-12);
+  }
+}
+.LinkCTA_iconLeft,
+.LinkCTA_iconRight {
+  color: var(--color-white);
+  background-color: var(--color-blue-700);
+  border-radius: var(--radius-full);
+  height: var(--spacing-icon-lg);
+  padding: var(--spacing-2);
+  width: var(--spacing-icon-lg);
+}

package/dist/components/TextCard.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps, ElementType, ReactNode } from "react";
+import type { IconSymbol } from "@sanity/icons";
+export type TextCardProps<E extends ElementType> = Omit<ComponentProps<E>, "as"> & {
+    as?: E;
+    className?: string;
+    children?: ReactNode;
+    eyebrow?: string;
+    icon?: IconSymbol;
+    title: string;
+    size?: "sm" | "md" | "lg";
+    arrow?: "none" | "arrow-right" | "arrow-top-right";
+};
+export declare function TextCard<E extends ElementType = "div">({ arrow, as, className, children, eyebrow, icon, size, title, ...props }: TextCardProps<E>): import("react/jsx-runtime").JSX.Element;

package/dist/components/TextCard.js

@@ -0,0 +1,62 @@
+import {
+  Eyebrow
+} from "./chunk-TBD76CFH.js";
+import "./chunk-SXBHZTND.js";
+import {
+  SanityIcon
+} from "./chunk-K2RGV5MW.js";
+import {
+  require_classnames
+} from "./chunk-RC7UR3KP.js";
+import {
+  __toESM
+} from "./chunk-U67V476Y.js";
+
+// src/components/TextCard.module.css
+var TextCard_default = {
+  textCard: "TextCard_textCard",
+  title: "TextCard_title",
+  description: "TextCard_description",
+  icon: "TextCard_icon"
+};
+
+// src/components/TextCard.tsx
+var import_classnames = __toESM(require_classnames());
+import { jsx, jsxs } from "react/jsx-runtime";
+function TextCard({
+  arrow,
+  as,
+  className,
+  children,
+  eyebrow,
+  icon,
+  size,
+  title,
+  ...props
+}) {
+  const Component = as ?? "div";
+  arrow ??= props.href ? "arrow-right" : "none";
+  size ??= "sm";
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ...props,
+      className: (0, import_classnames.default)(TextCard_default.textCard, className),
+      "data-size": size,
+      children: [
+        typeof icon === "string" && /* @__PURE__ */ jsx(SanityIcon, { icon, className: TextCard_default.icon }),
+        !!eyebrow && /* @__PURE__ */ jsx(Eyebrow, { children: eyebrow }),
+        /* @__PURE__ */ jsxs("p", { className: TextCard_default.title, children: [
+          title,
+          "\xA0",
+          arrow === "arrow-right" && "\u2192",
+          arrow === "arrow-top-right" && "\u2197\uFE0E"
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: TextCard_default.description, children })
+      ]
+    }
+  );
+}
+export {
+  TextCard
+};

package/dist/components/chunk-TBD76CFH.js

@@ -0,0 +1,33 @@
+import {
+  LinkCTA
+} from "./chunk-SXBHZTND.js";
+import {
+  require_classnames
+} from "./chunk-RC7UR3KP.js";
+import {
+  __toESM
+} from "./chunk-U67V476Y.js";
+
+// src/components/Eyebrow.module.css
+var Eyebrow_default = {
+  wrapper: "Eyebrow_wrapper",
+  eyebrow: "Eyebrow_eyebrow"
+};
+
+// src/components/Eyebrow.tsx
+var import_classnames = __toESM(require_classnames());
+import { jsx, jsxs } from "react/jsx-runtime";
+function Eyebrow({
+  children,
+  className,
+  cta
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: (0, import_classnames.default)(Eyebrow_default.wrapper, className), children: [
+    /* @__PURE__ */ jsx("div", { className: Eyebrow_default.eyebrow, children }),
+    !!cta?.text && /* @__PURE__ */ jsx(LinkCTA, { arrowPosition: "left", arrow: cta.arrow, href: cta.href, children: cta.text })
+  ] });
+}
+
+export {
+  Eyebrow
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sanity-id",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "repository": "https://github.com/sanity-io/sanity-id.git",
   "exports": {
     "./package.json": "./package.json",
@@ -29,7 +29,8 @@
     "./components/switch": "./dist/components/Switch.js",
     "./components/table": "./dist/components/Table.js",
     "./components/testimonial": "./dist/components/Testimonial.js",
-    "./components/textarea": "./dist/components/Textarea.js"
+    "./components/textarea": "./dist/components/Textarea.js",
+    "./components/text-card": "./dist/components/TextCard.js"
   },
   "files": [
     "./dist/*",

package/tailwind.css

@@ -263,7 +263,9 @@
 	font-weight: 400;
 	letter-spacing: -0.035em;
 	line-height: 1.08;
-	@apply text-trim;
+	text-box: trim-both cap alphabetic;
+	text-decoration-thickness: 8%;
+	text-underline-offset: 10%;
 
 	@variant screen-md {
 		font-size: 3rem;
@@ -278,7 +280,9 @@
 	font-weight: 400;
 	letter-spacing: -0.03em;
 	line-height: 1.1;
-	@apply text-trim;
+	text-box: trim-both cap alphabetic;
+	text-decoration-thickness: 8%;
+	text-underline-offset: 10%;
 }
 
 @utility text-component-heading-lg {
@@ -289,7 +293,9 @@
 	font-weight: 400;
 	letter-spacing: -0.02em;
 	line-height: 1.1;
-	@apply text-trim;
+	text-box: trim-both cap alphabetic;
+	text-decoration-thickness: 8%;
+	text-underline-offset: 10%;
 }
 
 @utility text-component-heading-md {
@@ -300,7 +306,9 @@
 	font-weight: 400;
 	letter-spacing: -0.01em;
 	line-height: 1.1;
-	@apply text-trim;
+	text-box: trim-both cap alphabetic;
+	text-decoration-thickness: 8%;
+	text-underline-offset: 10%;
 }
 
 @utility text-component-heading-sm {
@@ -311,7 +319,9 @@
 	font-weight: 400;
 	letter-spacing: -0.01em;
 	line-height: 1.1;
-	@apply text-trim;
+	text-box: trim-both cap alphabetic;
+	text-decoration-thickness: 8%;
+	text-underline-offset: 10%;
 }
 
 @utility text-body-xl {
@@ -374,7 +384,9 @@
 	letter-spacing: 0;
 	line-height: 1.3;
 	text-transform: uppercase;
-	@apply text-trim;
+	text-box: trim-both cap alphabetic;
+	text-decoration-thickness: 8%;
+	text-underline-offset: 10%;
 
 	em,
 	i {
@@ -390,7 +402,9 @@
 	letter-spacing: 0;
 	line-height: 1.3;
 	text-transform: uppercase;
-	@apply text-trim;
+	text-box: trim-both cap alphabetic;
+	text-decoration-thickness: 8%;
+	text-underline-offset: 10%;
 
 	em,
 	i {
@@ -406,7 +420,9 @@
 	letter-spacing: 0;
 	line-height: 1.3;
 	text-transform: uppercase;
-	@apply text-trim;
+	text-box: trim-both cap alphabetic;
+	text-decoration-thickness: 8%;
+	text-underline-offset: 10%;
 }
 
 @utility text-detail-md {
@@ -416,7 +432,9 @@
 	font-weight: 400;
 	letter-spacing: 0;
 	line-height: 1.5;
-	@apply text-trim;
+	text-box: trim-both cap alphabetic;
+	text-decoration-thickness: 8%;
+	text-underline-offset: 10%;
 }
 
 @utility text-detail-sm {
@@ -426,7 +444,9 @@
 	font-weight: 400;
 	letter-spacing: 0;
 	line-height: 1.5;
-	@apply text-trim;
+	text-box: trim-both cap alphabetic;
+	text-decoration-thickness: 8%;
+	text-underline-offset: 10%;
 }
 
 @utility text-quote-lg {
@@ -496,8 +516,8 @@
 }
 
 @utility text-inline-link {
+	text-decoration-line: underline;
 	cursor: pointer;
-	text-decoration: underline;
 
 	&:hover {
 		color: var(--color-fg-accent-blue);
@@ -527,12 +547,11 @@
 }
 
 @utility text-trim {
-	text-box-edge: cap alphabetic;
-	text-box-trim: trim-both;
+	text-box: trim-both cap alphabetic;
+}
 
-	@supports not (text-box-trim: trim-both) {
-		line-height: 1;
-	}
+@utility underline {
+	text-decoration-line: underline;
 }
 
 @utility focus-ring {