@plexui/styles 0.0.0-stage → 0.1.1

package/dist/es/components/ButtonGroup/ButtonGroup.module.css

@@ -0,0 +1,158 @@
+@layer components {.Root {
+  display: inline-flex;
+  align-items: stretch;
+  width: -moz-fit-content;
+  width: fit-content;
+
+  /* Inputs inside a ButtonGroup share the row and flex to fill space —
+     the rule targets raw <input>, the Plex Input Container (data-slot),
+     and a nested sub-ButtonGroup that wraps an Input (e.g. Input Group
+     pattern: [leading action] [Input + inline addon]). */
+}
+
+  /* Let focused item sit on top of neighbors so the ring isn't clipped */
+  .Root > * {
+    position: relative;
+  }
+  .Root > *:focus-visible,
+  .Root > *:focus-within {
+    z-index: 1;
+  }
+
+  /* Gap only appears between nested groups — joined buttons stay touching */
+  .Root:has(> [data-slot="button-group"]) {
+    gap: var(--button-group-nested-gap);
+  }
+
+  /* Horizontal — default. Plex Button variant="outline" renders its 1px
+     border via an inset box-shadow on its ::before pseudo — stripping the
+     left `border-inline-start` does nothing. Instead we (a) overlap items
+     by -1px and (b) clip 1px off the leading edge of the ::before of
+     every non-first child, so the inset shadow of item N+1 doesn't sit
+     next to the inset shadow of item N (which would read as a doubled
+     2px line). Focus ring lives on ::after, so clip-path on ::before
+     leaves the focus ring intact.
+
+     Separators are excluded — they need to render visibly BETWEEN items,
+     not be overlapped into oblivion. Adjacent items to a separator keep
+     their edge radii stripped, but skip the -1px/-clip trickery. */
+  .Root[data-orientation="horizontal"] > *:not(:first-child):not([data-slot="button-group-separator"]) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .Root[data-orientation="horizontal"]
+    > *:not(:first-child):not([data-slot="button-group-separator"]):not(
+      [data-slot="button-group-separator"] + *
+    ) {
+    margin-inline-start: -1px;
+  }
+  .Root[data-orientation="horizontal"]
+    > *:not(:first-child):not([data-slot="button-group-separator"]):not(
+      [data-slot="button-group-separator"] + *
+    )::before {
+    clip-path: inset(0 0 0 1px);
+  }
+  .Root[data-orientation="horizontal"]
+    > *:not(:last-child):not([data-slot="button-group-separator"]):not(
+      :has(+ [data-slot="button-group-separator"])
+    ) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  /* Strip the edge radius on items sitting directly next to a separator */
+  .Root[data-orientation="horizontal"] > [data-slot="button-group-separator"] + * {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .Root[data-orientation="horizontal"] > *:has(+ [data-slot="button-group-separator"]) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  /* Vertical — same approach, clip the top 1px of ::before on non-first */
+  .Root[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+  .Root[data-orientation="vertical"] > *:not(:first-child):not([data-slot="button-group-separator"]) {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+  .Root[data-orientation="vertical"]
+    > *:not(:first-child):not([data-slot="button-group-separator"]):not(
+      [data-slot="button-group-separator"] + *
+    ) {
+    margin-block-start: -1px;
+  }
+  .Root[data-orientation="vertical"]
+    > *:not(:first-child):not([data-slot="button-group-separator"]):not(
+      [data-slot="button-group-separator"] + *
+    )::before {
+    clip-path: inset(1px 0 0 0);
+  }
+  .Root[data-orientation="vertical"]
+    > *:not(:last-child):not([data-slot="button-group-separator"]):not(
+      :has(+ [data-slot="button-group-separator"])
+    ) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .Root[data-orientation="vertical"] > [data-slot="button-group-separator"] + * {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+  .Root[data-orientation="vertical"] > *:has(+ [data-slot="button-group-separator"]) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .Root > input,
+  .Root > [data-slot="input"],
+  .Root > [data-slot="button-group"]:has(> [data-slot="input"]) {
+    flex: 1 1 auto;
+  }/* Text — a muted label pill that slots into a ButtonGroup alongside
+   Buttons. Uses an inset box-shadow border (same trick Button uses for
+   variant="outline") so the group's edge-clipping rules (::before
+   clip-path) also work here and collapse the doubled 1px edge. */.Text {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 2);
+  padding-inline: calc(var(--spacing) * 4);
+  align-self: stretch;
+  background: var(--button-group-text-background);
+  color: var(--button-group-text-color);
+  font-size: var(--button-group-text-font-size);
+  font-weight: var(--button-group-text-font-weight);
+  line-height: 1;
+  white-space: nowrap;
+  border-radius: var(--radius-md);
+}
+
+  .Text::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: 0 0 0 1px var(--button-group-text-border-color) inset;
+    pointer-events: none;
+  }
+
+  .Text svg {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+  }/* Separator used between items inside a ButtonGroup.
+   Sits above the neighbor buttons (z-index) so the 1px line isn't
+   visually swallowed by the adjacent box-shadow borders. Parent-scoped
+   selector beats the base Separator class so the stronger color wins. */.Root > .Separator {
+  position: relative;
+  z-index: 1;
+  align-self: stretch;
+  margin: 0;
+  flex-shrink: 0;
+  background: var(--button-group-separator-color);
+}
+
+  .Root > .Separator[data-orientation="vertical"] {
+    height: auto;
+  }
+}

package/dist/es/components/Card/Card.module.css

@@ -0,0 +1,125 @@
+@layer components {.Card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap);
+  width: 100%;
+  min-width: 0;
+  padding: var(--card-padding);
+  border-radius: var(--card-radius);
+  background: var(--card-background);
+  color: var(--card-text-color);
+  box-shadow: 0 0 0 1px var(--card-border-color) inset;
+  font-size: var(--card-font-size);
+  line-height: var(--font-text-sm-line-height);
+  transition-duration: var(--transition-duration-basic);
+  transition-property: background-color, box-shadow, border-color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  /* When used as a link, flatten anchor defaults */
+  .Card:where(a) {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  /* =============================================
+    Interactive
+  ============================================= */
+  .Card:where([data-interactive]) {
+    cursor: pointer;
+  }
+
+    .Card:where([data-interactive]):hover {
+      --card-background: var(--card-background-hover);
+      --card-border-color: var(--card-border-color-hover);
+    }
+
+    .Card:where([data-interactive]):focus-visible {
+      outline: 2px solid var(--color-ring);
+      outline-offset: 2px;
+    }
+
+  /* =============================================
+    Sizes
+  ============================================= */
+  .Card:where([data-size="sm"]) {
+    --card-padding: calc(var(--spacing) * 4);
+    --card-gap: calc(var(--spacing) * 3);
+  }
+
+  .Card:where([data-size="md"]) {
+    --card-padding: calc(var(--spacing) * 5);
+    --card-gap: calc(var(--spacing) * 4);
+  }
+
+  .Card:where([data-size="lg"]) {
+    --card-padding: calc(var(--spacing) * 6);
+    --card-gap: calc(var(--spacing) * 5);
+  }
+
+  /* =============================================
+    Variants
+  ============================================= */
+  .Card:where([data-variant="outline"]) {
+    --card-background: var(--color-surface);
+    --card-border-color: var(--color-border);
+  }
+
+  .Card:where([data-variant="solid"]) {
+    --card-background: var(--color-surface-secondary);
+    --card-border-color: transparent;
+    box-shadow: none;
+  }
+
+  .Card:where([data-variant="ghost"]) {
+    --card-background: transparent;
+    --card-border-color: transparent;
+    box-shadow: none;
+    padding: 0;
+  }/* ================================================
+  Header — stacked title + description
+================================================ */.Header {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-width: 0;
+}.Title {
+  margin: 0 0 calc(var(--spacing) * 1.5);
+  color: var(--card-title-color);
+  font-size: var(--card-title-font-size);
+  font-weight: var(--card-title-font-weight);
+  line-height: var(--font-heading-xs-line-height);
+  letter-spacing: var(--font-heading-xs-tracking);
+  text-wrap: balance;
+}.Description {
+  margin: calc(calc(var(--spacing) * 1.5) * -1) 0 0;
+  color: var(--card-description-color);
+  font-size: var(--card-description-font-size);
+  line-height: var(--font-text-sm-line-height);
+  text-wrap: pretty;
+}/* ================================================
+  Content — primary body
+================================================ */.Content {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing) * 3);
+  min-width: 0;
+}/* ================================================
+  Footer — aligned actions
+================================================ */.Footer {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 2);
+  min-width: 0;
+  margin-top: calc(var(--spacing) * 3);
+}/* ================================================
+  Action — top-right slot in Header
+================================================ */.Action {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 1);
+}
+}

package/dist/es/components/Checkbox/Checkbox.module.css

@@ -0,0 +1,225 @@
+@layer components {.Container {
+  position: relative;
+  display: flex;
+}
+
+  .Container[data-has-label] {
+    align-items: flex-start;
+  }
+
+  .Container[data-orientation="right"] {
+    flex-direction: row-reverse;
+  }
+
+  .Container[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Radix pushes the inputs off screen in a weird way that
+    messes with error overlays */
+  .Container > input {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 1px !important;
+    transform: none !important;
+  }.Checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--checkbox-indicator-size);
+  max-width: var(--checkbox-indicator-size);
+  height: var(--checkbox-indicator-size);
+  /* Center indicator with first line of label text (mirrors RadioGroup's RadioIndicatorWrapper approach) */
+  margin-top: calc((var(--checkbox-label-line-height) - var(--checkbox-indicator-size)) / 2);
+  padding: 0;
+  border: 1px solid var(--alpha-16);
+  border-radius: var(--radius-xs);
+  background-color: transparent;
+  cursor: pointer;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease;
+}
+    @media (hover: hover) and (pointer: fine) {.Checkbox:where(:not([data-disabled], [data-state="checked"])):hover {
+      border-color: var(--alpha-20);
+}
+}
+
+  .Checkbox[data-state="indeterminate"],
+  .Checkbox[data-state="checked"] {
+    border-color: var(--gray-900);
+    background-color: var(--gray-900);
+  }
+
+  .Checkbox:focus {
+    outline: none;
+  }
+
+  .Checkbox:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  /* =============================================
+    Invalid
+  ============================================= */
+  .Checkbox[aria-invalid="true"] {
+    border-color: var(--input-border-color-invalid);
+  }
+
+    .Checkbox[aria-invalid="true"][data-state="indeterminate"],
+    .Checkbox[aria-invalid="true"][data-state="checked"] {
+      border-color: var(--input-border-color-invalid);
+      background-color: var(--input-border-color-invalid);
+    }
+
+  .Checkbox[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  /* =============================================
+    Pill
+  ============================================= */
+  .Checkbox[data-pill] {
+    border-radius: var(--radius-full);
+  }
+
+  /* =============================================
+    Ghost variant
+  ============================================= */
+  .Checkbox[data-variant="ghost"] {
+    border-color: transparent;
+    background-color: transparent;
+
+  }
+      @media (hover: hover) and (pointer: fine) {.Checkbox[data-variant="ghost"]:where(:not([data-disabled], [data-state="checked"])):hover {
+        border-color: transparent;
+}.Checkbox[data-variant="ghost"]:where(:not([data-disabled], [data-state="checked"])):hover, :where([data-theme="light"]) .Checkbox[data-variant="ghost"]:where(:not([data-disabled], [data-state="checked"])):hover {
+background-color: var(--gray-50);
+}:where([data-theme="dark"]) .Checkbox[data-variant="ghost"]:where(:not([data-disabled], [data-state="checked"])):hover {
+background-color: var(--gray-800);
+}
+}
+
+    .Checkbox[data-variant="ghost"][data-state="indeterminate"],
+    .Checkbox[data-variant="ghost"][data-state="checked"] {
+      border-color: transparent;
+      background-color: transparent;
+    }.CheckMark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 64%;
+  height: 32%;
+  transform: rotate(-45deg) translate(-10%, 100%);
+  transform-origin: center;
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease;
+}
+
+  /* Radix mounts the indicator on every check, so the entry animation would
+     also play for every checked box on first render or when a tab with
+     checkboxes opens. It plays only for the checkbox in use: hovered, or
+     focused from the keyboard. */
+    @starting-style {
+  .Container:is(:hover, :focus-within) .CheckMark {
+      opacity: 0
+  }
+    }
+
+  [data-state="indeterminate"] .CheckMark {
+    transform: translate(30%, 80%);
+  }
+
+    [data-state="indeterminate"] .CheckMark::before {
+      opacity: 0;
+    }
+
+  /* CheckMark arms */
+  .CheckMark::before,
+  .CheckMark::after {
+    position: absolute;
+    display: block;
+    background: var(--gray-0);
+    content: "";
+    will-change: transform;
+  }
+    @starting-style {
+
+  .Container:is(:hover, :focus-within) .CheckMark::before, .Container:is(:hover, :focus-within) .CheckMark::after {
+      transform: scale(0)
+  }
+    }
+
+  /* Ghost variant — checkmark uses text color instead of white */
+    [data-variant="ghost"] .CheckMark::before,
+    [data-variant="ghost"] .CheckMark::after {
+      background: var(--gray-900);
+    }
+
+  .CheckMark::before {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 2px;
+    transform-origin: 0 0;
+    transition:
+      transform 100ms ease 80ms,
+      opacity 200ms ease;
+  }
+
+  .CheckMark [data-state="indeterminate"]::before {
+    opacity: 0;
+  }
+
+  .CheckMark::after {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    transform-origin: 0 100%;
+    transition: transform 100ms ease 160ms;
+  }.Label {
+  display: block;
+  min-height: var(--checkbox-label-line-height);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: var(--checkbox-label-line-height);
+}
+
+  [data-orientation="left"] .Label {
+    padding-left: var(--checkbox-label-gap);
+  }
+
+  [data-orientation="right"] .Label {
+    padding-right: calc(var(--spacing) * 3);
+  }/* Label with a second line: the group carries the gap, the label inside it does not */.LabelGroup {
+  display: flex;
+  flex-direction: column;
+}
+
+  [data-orientation="left"] .LabelGroup {
+    padding-left: var(--checkbox-label-gap);
+  }
+
+  [data-orientation="right"] .LabelGroup {
+    padding-right: calc(var(--spacing) * 3);
+  }
+
+  .LabelGroup > .Label {
+    padding-inline: 0;
+  }.Description {
+  color: var(--color-text-secondary);
+  font-size: var(--font-text-xs-size);
+  line-height: var(--font-text-xs-line-height);
+}
+
+  [data-disabled] .Description {
+    cursor: not-allowed;
+  }
+}

package/dist/es/components/CodeBlock/CodeBlock.module.css

@@ -0,0 +1,139 @@
+@layer components {.CodeBlock {
+  position: relative;
+  border: none;
+  border-radius: 10px;
+  background-color: var(--codeblock-background-color);
+}.CopyButtonContainer {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background-color: var(--color-surface-elevated-secondary);
+  color: var(--color-text-secondary);
+  /* Extend the codeblock's surface colour 8px to the right of the
+   * button so horizontally-overflowing code text doesn't peek through
+   * the gap between the button's right edge and the codeblock's right
+   * edge. The shadow renders behind the button bg (on top of the
+   * scrolling <pre>), masking that 8px band. */
+  box-shadow: 8px 0 0 0 var(--codeblock-background-color);
+}/* Force the CopyButton to inherit the container's color on all states.
+   The ghost-secondary hover background (rendered via the Button's
+   ::before pseudo-element) is intentionally NOT suppressed here —
+   it's what gives the copy icon a visible hover affordance on the
+   light-grey codeblock surface. (A previous version of this rule
+   zeroed ::before to keep the hover invisible; see commit history
+   for the regression that caused.) */.CopyButtonContainer button {
+  color: inherit !important;
+  padding: 0 !important;
+  -webkit-tap-highlight-color: transparent;
+}/* The button's own outline stays off; keyboard focus shows Button's
+   ::after ring */.CopyButtonContainer button:focus,
+.CopyButtonContainer button:focus-visible {
+  outline: none !important;
+}.SyntaxHighlighter {
+  --syntax1: var(--codeblock-syntax-1);
+  --syntax2: var(--codeblock-syntax-2);
+  --syntax3: var(--codeblock-syntax-3);
+  --syntax4: var(--codeblock-syntax-4);
+  --syntax5: var(--codeblock-syntax-5);
+
+  overflow: auto;
+  display: block;
+  /* Padding inside the overflow: auto container */
+  padding: 12px 48px 12px 16px;
+  margin: 0;
+  background: transparent;
+  color: var(--color-text);
+  font-size: 0.875em;
+  /* 14px to a 16px baseline */
+  font-weight: var(--font-weight-normal);
+  line-height: 1.714em;
+  /* 24px at 14px */
+
+  /* stylelint-disable selector-class-pattern */
+
+  /* Order matters here, for nested tokens */
+}
+  .SyntaxHighlighter :global(.token.property),
+  .SyntaxHighlighter :global(.token.variable),
+  .SyntaxHighlighter :global(.token.attr-name),
+  .SyntaxHighlighter :global(.token.unit),
+  .SyntaxHighlighter :global(.token.id),
+  .SyntaxHighlighter :global(.token.selector),
+  .SyntaxHighlighter :global(.token.entity),
+  .SyntaxHighlighter :global(.token.tag),
+  .SyntaxHighlighter :global(.token.type) {
+    color: var(--syntax4);
+  }
+
+  .SyntaxHighlighter :global(.token.url),
+  .SyntaxHighlighter :global(.token.boolean),
+  .SyntaxHighlighter :global(.token.number),
+  .SyntaxHighlighter :global(.token.important) {
+    color: var(--syntax5);
+  }
+
+  .SyntaxHighlighter :global(.token.builtin),
+  .SyntaxHighlighter :global(.token.function),
+  .SyntaxHighlighter :global(.token.class-name) {
+    color: var(--syntax1);
+  }
+  .SyntaxHighlighter :global(.token.keyword),
+  .SyntaxHighlighter :global(.token.constant),
+  .SyntaxHighlighter :global(.token.symbol),
+  .SyntaxHighlighter :global(.token.deleted) {
+    color: var(--syntax2);
+  }
+
+  .SyntaxHighlighter :global(.token.string),
+  .SyntaxHighlighter :global(.token.char),
+  .SyntaxHighlighter :global(.token.regex),
+  .SyntaxHighlighter :global(.token.attr-value),
+  .SyntaxHighlighter :global(.token.inserted) {
+    color: var(--syntax3);
+  }
+
+  .SyntaxHighlighter :global(.token.comment),
+  .SyntaxHighlighter :global(.token.prolog),
+  .SyntaxHighlighter :global(.token.doctype),
+  .SyntaxHighlighter :global(.token.cdata) {
+    color: color-mix(in srgb, var(--color-text), transparent 50%);
+  }
+
+  .SyntaxHighlighter :global(.token.punctuation),
+  .SyntaxHighlighter :global(.token.operator) {
+    color: color-mix(in srgb, var(--color-text), transparent 40%);
+  }
+
+  .SyntaxHighlighter :global(.token.console) {
+    color: var(--color-text);
+  }/* Collapsible Code Block */.CollapsibleCodeBlock {
+  overflow: hidden;
+  transition: max-height 0.2s ease-out;
+}/* Expanded under `maxExpandedHeight`, the code shrinks to fit and scrolls
+   (the <pre> is the scroll container), with the copy button kept in view */.CollapsibleCodeBlock:not([data-collapsed]) {
+  display: flex;
+  flex-direction: column;
+}/* The collapsed height (min and max) is set inline from `collapsedHeight` */.CollapsibleCodeBlock[data-collapsed] {
+  overflow: hidden;
+}.GradientOverlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(to bottom,
+      transparent 0%,
+      transparent 20%,
+      var(--codeblock-background-color) 100%);
+}.ViewCodeButtonContainer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+}