@ctrl-ui/react 0.8.0

package/dist/styles/recipes/inline-citation.css

@@ -0,0 +1,174 @@
+@layer components {
+  :where([data-control-family="inline-citation"][data-slot="root"]),
+  :where([data-control-ui="inline-citation"][data-slot="content"]) {
+    --cui-inline-citation-navigation-background: oklch(from var(--muted) l c h / 0.45);
+    --cui-inline-citation-quote-background: oklch(from var(--muted) l c h / 0.55);
+    --cui-inline-citation-quote-radius: var(--radius-control);
+    --cui-inline-citation-trigger-background: oklch(from var(--muted) l c h / 0.55);
+    --cui-inline-citation-trigger-border-color: var(--border);
+    --cui-inline-citation-trigger-foreground: var(--muted-foreground);
+    --cui-inline-citation-trigger-hover-background: var(--muted);
+    --cui-inline-citation-trigger-hover-foreground: var(--foreground);
+    --cui-inline-citation-trigger-radius: 9999px;
+  }
+  :where([data-control-family="inline-citation"][data-slot="trigger"]) {
+    margin-inline-start: calc(var(--spacing) * 1);
+    block-size: calc(var(--spacing) * 6);
+    max-inline-size: calc(var(--spacing) * 52);
+    gap: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
+    border: 1px solid var(--cui-inline-citation-trigger-border-color);
+    border-radius: var(--cui-inline-citation-trigger-radius);
+    background: var(--cui-inline-citation-trigger-background);
+    color: var(--cui-inline-citation-trigger-foreground);
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-normal);
+    outline-style: none;
+    transition-property: background-color, color, box-shadow;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="inline-citation"][data-slot="trigger"]:hover) {
+      background: var(--cui-inline-citation-trigger-hover-background);
+      color: var(--cui-inline-citation-trigger-hover-foreground);
+    }
+  }
+
+  :where([data-control-ui="inline-citation"][data-slot="favicon"]) {
+    inline-size: calc(var(--spacing) * 3.5);
+    block-size: calc(var(--spacing) * 3.5);
+    border: 1px solid var(--background);
+    border-radius: 9999px;
+    background: var(--muted);
+  }
+
+  :where([data-control-family="inline-citation"][data-slot="navigation"]) {
+    min-block-size: calc(var(--spacing) * 10);
+    gap: calc(var(--spacing) * 1);
+    padding-inline: calc(var(--spacing) * 2);
+    border-bottom: 1px solid var(--border);
+    background: var(--cui-inline-citation-navigation-background);
+  }
+
+  :where(
+    [data-control-family="inline-citation"]:is(
+      [data-slot="position"],
+      [data-slot="source-hostname"],
+      [data-slot="source-description"],
+      [data-slot="source-quote"]
+    )
+  ) {
+    color: var(--muted-foreground);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="inline-citation"][data-slot="source"]) {
+    gap: calc(var(--spacing) * 3);
+    padding: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="inline-citation"][data-slot="source-header"]) {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-ui="inline-citation"][data-slot="source-favicon"]) {
+    inline-size: calc(var(--spacing) * 5);
+    block-size: calc(var(--spacing) * 5);
+    border-radius: 9999px;
+    background: var(--muted);
+  }
+
+  :where([data-control-family="inline-citation"][data-slot="source-title"]) {
+    gap: calc(var(--spacing) * 2);
+    color: var(--foreground);
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-medium);
+    line-height: calc(var(--spacing) * 5);
+    outline-style: none;
+  }
+
+  :where([data-control-family="inline-citation"][data-slot="source-title"]:is(:hover, :focus-visible)) {
+    text-decoration-line: underline;
+  }
+
+  :where([data-control-family="inline-citation"][data-slot="source-external-icon"]) {
+    margin-block-start: calc(var(--spacing) * 0.5);
+    inline-size: calc(var(--spacing) * 3.5);
+    block-size: calc(var(--spacing) * 3.5);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="inline-citation"][data-slot="source-quote"]) {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    border-radius: var(--cui-inline-citation-quote-radius);
+    background: var(--cui-inline-citation-quote-background);
+    line-height: calc(var(--spacing) * 5);
+  }
+
+  :where([data-control-family="inline-citation"][data-slot="source-description"]) {
+    line-height: calc(var(--spacing) * 5);
+  }
+
+  :where([data-control-family="inline-citation"][data-slot="position"]) {
+    margin-inline-start: auto;
+    padding-inline: calc(var(--spacing) * 1);
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+@property --cui-inline-citation-trigger-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-inline-citation-trigger-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-inline-citation-trigger-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-inline-citation-trigger-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-inline-citation-trigger-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-inline-citation-trigger-hover-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-inline-citation-navigation-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-inline-citation-quote-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-inline-citation-quote-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/item.css

@@ -0,0 +1,107 @@
+@layer components {
+  :where([data-control-family="item"][data-slot="root"]) {
+    --cui-item-radius: var(--radius-lg);
+    --cui-item-hover-background: transparent;
+    --cui-item-hover-border-color: var(--_item-border-color);
+    --cui-item-border-width: 0px;
+    --cui-item-active-scale: 1;
+    --_item-background: transparent;
+    --_item-border-color: transparent;
+    outline: var(--cui-item-border-width) solid var(--_item-border-color);
+    outline-offset: calc(-1 * var(--cui-item-border-width));
+    border-radius: var(--cui-item-radius);
+    background: var(--_item-background);
+    box-shadow: none;
+    color: var(--foreground);
+    transition-property: background-color, box-shadow, color, outline-color, scale;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+    gap: calc(var(--spacing) * 3);
+    padding: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="item"][data-slot="content"]) {
+    gap: calc(var(--spacing) * 0.5);
+  }
+
+  :where([data-control-family="item"][data-slot="actions"]) {
+    gap: calc(var(--spacing) * 1.5);
+  }
+
+  :where([data-control-family="item"][data-slot="header"]),
+  :where([data-control-family="item"][data-slot="footer"]) {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="item"][data-slot="root"][data-variant="outline"]) {
+    --_item-border-color: var(--border);
+    --cui-item-border-width: 1px;
+  }
+
+  :where([data-control-family="item"][data-slot="root"][data-variant="muted"]) {
+    --_item-background: oklch(from var(--muted) l c h / 0.5);
+  }
+
+  :where([data-control-family="item"][data-slot="root"]:is(a, button, [href], [role="button"]):hover) {
+    outline-color: var(--cui-item-hover-border-color);
+    background: var(--cui-item-hover-background);
+    box-shadow: none;
+  }
+
+  :where([data-control-family="item"][data-slot="root"]:is(a, button, [href], [role="button"]):active) {
+    scale: var(--cui-item-active-scale);
+  }
+
+  :where([data-control-family="item"][data-slot="footer"]) {
+    font-size: var(--text-caption);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="item"][data-slot="description"]) {
+    font-size: var(--text-sm);
+    line-height: var(--leading-relaxed);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="item"][data-slot="title"]) {
+    gap: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
+    line-height: 1;
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="item"][data-slot="media"]) {
+    color: var(--muted-foreground);
+  }
+}
+
+@property --cui-item-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-item-hover-background {
+  syntax: "*";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-item-hover-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-item-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-item-active-scale {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}

package/dist/styles/recipes/kbd.css

@@ -0,0 +1,55 @@
+@layer components {
+  :where([data-control-family="kbd"][data-slot="root"]) {
+    block-size: calc(var(--spacing) * 5);
+    min-inline-size: calc(var(--spacing) * 5);
+    gap: calc(var(--spacing) * 1);
+    padding-inline: calc(var(--spacing) * 1.5);
+    --cui-kbd-radius: var(--radius-control);
+    --cui-kbd-background: oklch(from var(--card) l c h / 0.6);
+    --cui-kbd-foreground: var(--muted-foreground);
+    --cui-kbd-border-color: var(--control-rim);
+    --cui-kbd-shadow: var(--shadow-sm);
+    border-radius: var(--cui-kbd-radius);
+    background: var(--cui-kbd-background);
+    box-shadow:
+      inset 0 0 0 var(--control-rim-width) var(--cui-kbd-border-color),
+      var(--cui-kbd-shadow);
+    color: var(--cui-kbd-foreground);
+    font-size: var(--text-micro);
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="kbd"][data-slot="group"]) {
+    gap: calc(var(--spacing) * 1);
+  }
+}
+
+@property --cui-kbd-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-kbd-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-kbd-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-kbd-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-kbd-shadow {
+  syntax: "*";
+  inherits: true;
+}

package/dist/styles/recipes/markdown-block.css

@@ -0,0 +1,75 @@
+@layer components {
+  :where([data-control-family="markdown-block"][data-slot="root"]) {
+    margin-block: calc(var(--spacing) * 4);
+    --cui-markdown-block-radius: var(--radius-panel);
+    --cui-markdown-block-background: var(--background);
+    --cui-markdown-block-border-color: var(--border);
+    --cui-markdown-block-shadow: var(--shadow-sm);
+    --cui-markdown-block-header-border-color: var(--border);
+    --cui-markdown-block-icon-background: oklch(from var(--foreground) l c h / 0.08);
+    background: var(--cui-markdown-block-background);
+    border: 1px solid var(--cui-markdown-block-border-color);
+    border-radius: var(--cui-markdown-block-radius);
+    box-shadow: var(--cui-markdown-block-shadow);
+  }
+
+  :where([data-control-family="markdown-block"][data-slot="header"]) {
+    gap: calc(var(--spacing) * 3);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
+    border-bottom: 1px solid var(--cui-markdown-block-header-border-color);
+  }
+
+  :where([data-control-family="markdown-block"][data-slot="title"]) {
+    gap: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="markdown-block"][data-slot="content"]) {
+    padding: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="markdown-block"][data-slot="title-icon"]) {
+    inline-size: calc(var(--spacing) * 5);
+    block-size: calc(var(--spacing) * 5);
+    background: var(--cui-markdown-block-icon-background);
+    border-radius: var(--radius-md);
+    font-size: var(--text-micro);
+  }
+}
+
+@property --cui-markdown-block-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-markdown-block-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-block-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-block-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-markdown-block-header-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-block-icon-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/markdown.css

@@ -0,0 +1,204 @@
+@layer components {
+  :where([data-control-family="markdown"][data-slot="root"]) {
+    --cui-markdown-foreground: oklch(from var(--foreground) l c h / 0.9);
+    --cui-markdown-blockquote-border-color: var(--border);
+    --cui-markdown-blockquote-foreground: var(--muted-foreground);
+    --cui-markdown-inline-code-background: color-mix(in oklab, var(--foreground) 8%, transparent);
+    --cui-markdown-inline-code-foreground: var(--foreground);
+    --cui-markdown-inline-code-radius: 0.25rem;
+    --cui-markdown-link-foreground: var(--primary-text);
+    --cui-markdown-table-cell-border-color: var(--border);
+    --cui-markdown-table-header-background: var(--muted);
+    color: var(--cui-markdown-foreground);
+    font-size: var(--text-label);
+  }
+
+  :where([data-control-family="markdown"][data-slot="table-cell"]) {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 1.5);
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--cui-markdown-table-cell-border-color);
+  }
+
+  :where([data-control-family="markdown"][data-slot="table-header"]) {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 1.5);
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--border);
+    background-color: var(--cui-markdown-table-header-background);
+    text-align: left;
+    font-weight: var(--font-weight-semibold);
+  }
+
+  :where([data-control-family="markdown"][data-slot="table"]) {
+    border-collapse: collapse;
+    font-size: var(--text-label);
+  }
+
+  :where([data-control-family="markdown"][data-slot="emphasis"]) {
+    font-style: italic;
+  }
+
+  :where([data-control-family="markdown"][data-slot="strong"]) {
+    font-weight: var(--font-weight-semibold);
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="markdown"][data-slot="separator"]) {
+    margin-block: calc(var(--spacing) * 6);
+    border-color: var(--border);
+  }
+
+  :where([data-control-family="markdown"][data-slot="blockquote"]) {
+    margin-block: calc(var(--spacing) * 4);
+    padding-inline-start: calc(var(--spacing) * 4);
+    border-color: var(--cui-markdown-blockquote-border-color);
+    border-left-style: solid;
+    border-left-width: 2px;
+    color: var(--cui-markdown-blockquote-foreground);
+    font-style: italic;
+  }
+
+  :where([data-control-family="markdown"][data-slot="link"]) {
+    font-weight: var(--font-weight-medium);
+    color: var(--cui-markdown-link-foreground);
+    --_markdown-link-decoration: underline;
+    text-decoration-line: var(--_markdown-link-decoration);
+    text-underline-offset: 2px;
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="markdown"][data-slot="link"]:hover) {
+      --_markdown-link-decoration: none;
+      text-decoration-line: var(--_markdown-link-decoration);
+    }
+  }
+
+  :where([data-control-family="markdown"][data-slot="list-item"]) {
+    line-height: calc(var(--spacing) * 7);
+  }
+
+  :where([data-control-family="markdown"][data-slot="paragraph"]) {
+    margin-block: calc(var(--spacing) * 3);
+    line-height: calc(var(--spacing) * 7);
+  }
+
+  :where([data-control-family="markdown"][data-slot="h3"]) {
+    margin-block: calc(var(--spacing) * 5) calc(var(--spacing) * 2);
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="markdown"][data-slot="h2"]) {
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--text-lg);
+    line-height: var(--text-lg--line-height);
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="markdown"][data-slot="h1"]) {
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--text-xl);
+    line-height: var(--text-xl--line-height);
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="markdown"][data-slot="h1"]),
+  :where([data-control-family="markdown"][data-slot="h2"]) {
+    margin-block: calc(var(--spacing) * 6) calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="markdown"]:is([data-slot="h1"], [data-slot="h2"], [data-slot="h3"]):first-child) {
+    margin-block-start: 0;
+  }
+
+  :where([data-control-family="markdown"][data-slot="paragraph"]:first-child) {
+    margin-block-start: 0;
+  }
+
+  :where([data-control-family="markdown"][data-slot="paragraph"]:last-child) {
+    margin-block-end: 0;
+  }
+
+  :where([data-control-family="markdown"][data-slot="unordered-list"]),
+  :where([data-control-family="markdown"][data-slot="ordered-list"]) {
+    margin-block: calc(var(--spacing) * 3);
+    padding-inline-start: calc(var(--spacing) * 6);
+  }
+
+  :where([data-control-family="markdown"]:is([data-slot="unordered-list"], [data-slot="ordered-list"]) > * + *) {
+    margin-block-start: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="markdown"][data-slot="table-scroll"]) {
+    margin-block: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="markdown"][data-slot="inline-code"]) {
+    padding-inline: calc(var(--spacing) * 1);
+    padding-block: calc(var(--spacing) * 0.5);
+    border-radius: var(--cui-markdown-inline-code-radius);
+    background-color: var(--cui-markdown-inline-code-background);
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+    color: var(--cui-markdown-inline-code-foreground);
+  }
+}
+
+@property --cui-markdown-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-blockquote-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-blockquote-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-inline-code-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-inline-code-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-inline-code-radius {
+  syntax: "<length-percentage>+";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-markdown-link-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-table-cell-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-markdown-table-header-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}