@plexui/ui 0.19.0 → 0.20.0

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

@@ -1,159 +0,0 @@
-@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: var(--spacing-2);
-  padding-inline: 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);
-  font-family: var(--font-family-text);
-  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

@@ -1,125 +0,0 @@
-@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

@@ -1,198 +0,0 @@
-@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;
-}
-
-  @starting-style {.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 {
-  .CheckMark::before,
-  .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);
-  }
-}

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

@@ -1,137 +0,0 @@
-@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;
-}.CopyButtonContainer button:focus,
-.CopyButtonContainer button:focus-visible {
-  outline: none !important;
-}.CopyButtonContainer button:focus-visible::after {
-  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;
-}.CollapsibleCodeBlock[data-collapsed] {
-  overflow: hidden;
-  min-height: 140px;
-}.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;
-}
-}