@infonomic/uikit 5.3.0 → 5.5.0

package/dist/components/shimmer/shimmer.module.css

@@ -0,0 +1,53 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+/* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
+@layer infonomic-components {
+  .shimmer {
+    position: relative;
+    overflow: hidden;
+    background-color: #f0f0f0;
+    background-image: linear-gradient(90deg,
+        transparent,
+        rgba(255, 255, 255, 0.6),
+        transparent);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+  }
+
+  .shimmer:is(:global(.dark) *) {
+    background-color: #141414;
+    background-image: linear-gradient(90deg,
+        transparent,
+        rgba(255, 255, 255, 0.01),
+        transparent);
+  }
+
+  .shimmerContainer {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .rectangular {
+    border-radius: 0.25rem;
+  }
+
+  .text {
+    border-radius: 0.125rem;
+    height: 1rem;
+  }
+
+  .circular {
+    border-radius: 50%;
+    aspect-ratio: 1;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+
+    100% {
+      background-position: 200% 0;
+    }
+  }
+}

package/dist/components/table/table.module.css

@@ -0,0 +1,100 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+/* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
+@layer infonomic-components {
+
+  /* 'table--container break-normal overflow-hidden relative shadow-md rounded-md my-[16px] dark:border dark:border-canvas-700', */
+  .table-container {
+    display: block;
+    overflow: hidden;
+    word-break: normal;
+    position: relative;
+    box-shadow: var(--shadow-sm);
+    border-radius: var(--border-radius-sm);
+    border: 1px solid var(--border-color);
+  }
+
+  .table-scroller {
+    overflow-x: auto;
+    max-width: calc(100vw - 32px);
+  }
+
+  .table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0;
+    font-size: var(--font-size-sm);
+    text-align: left;
+  }
+
+  /* 'text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400', */
+  .table-header {
+    font-size: var(--font-size-sm);
+    /* text-transform: uppercase; */
+    background-color: var(--canvas-50);
+  }
+
+  /* 'border-b border-solid border-canvas-200 bg-white hover:bg-canvas-100/50 dark:border-canvas-700/60 dark:bg-canvas-800/50 dark:hover:bg-canvas-700/50', */
+  .table-row {
+    border-bottom: 1px solid var(--canvas-50);
+    background-color: white;
+  }
+
+  .table-row:hover {
+    background-color: var(--canvas-50);
+  }
+
+  /* 'whitespace-nowrap px-2 py-4 text-sm text-gray-700 uppercase bg-canvas-100/50 dark:bg-canvas-800/50 dark:text-gray-200', */
+  .table-heading-cell {
+    white-space: nowrap;
+    padding: var(--spacing-8) var(--spacing-8);
+    font-size: 0.975rem; /* 15.6px */
+    /* text-transform: uppercase; */
+    background-color: var(--canvas-50);
+  }
+
+  /* not-prose px-2 py-2 text-sm [&_a]:underline */
+  .table-cell {
+    padding: var(--spacing-8);
+    font-size: var(--font-size-sm);
+
+    & a {
+      text-decoration: underline;
+    }
+  }
+
+  /* 'text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400', */
+  .table-footer {
+    font-size: var(--font-size-sm);
+    /* text-transform: uppercase; */
+    background-color: var(--canvas-100);
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the 
+  * consuming application to detect a user's preferred
+  * color scheme - either by header or cookie, and set
+  * a root html class accordingly
+  */
+  :global(.dark) {
+    .table-header {
+      background-color: var(--canvas-700);
+    }
+
+    .table-row:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      border-bottom: 1px solid var(--canvas-700);
+      background-color: var(--canvas-800);
+    }
+
+    .table-row:hover:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h)
+    }
+
+    .table-heading-cell:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      background-color: oklch(from var(--canvas-800) calc(l * 1.1) c h);
+    }
+
+    .table-footer:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+      background-color: var(--canvas-800);
+    }
+  }
+}

package/dist/components/tabs/tabs.module.css

@@ -0,0 +1,66 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+
+  .tabs-root {
+    display: flex;
+    padding: var(--spacing-8);
+    flex-direction: column;
+    gap: var(--spacing-4);
+    border-radius: var(--border-radius-md);
+    border: 1px solid var(--border-color);
+  }
+
+  .tabs-list {
+    display: flex;
+    width: 100%;
+    gap: var(--gap-2);
+    align-items: center;
+    border-radius: var(--border-radius-md);
+    padding: var(--spacing-4);
+    border: 1px solid var(--border-color);
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .tabs-trigger {
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    width: 100%;
+
+    /* &[data-state="active"] {
+      color: var(----primary-600);
+      box-shadow:
+        inset 0 -1px 0 0 currentColor,
+        0 1px 0 0 currentColor;
+    } */
+
+    &:focus {
+      position: relative;
+      /* NOTE: will override ring shadows for buttons */
+      /* Will revisit as we're going to rewrite our uikit tabs component */
+      /* box-shadow: 0 0 0 2px black; */
+    }
+  }
+
+  .tabs-content {
+    margin-top: var(--spacing-8);
+    padding: 6px;
+    outline: none;
+
+    &[data-state="inactive"] {
+      display: none;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}

package/dist/components/tooltip/tooltip.module.css

@@ -0,0 +1,45 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .tooltip {
+    font-size: 0.75rem;
+    line-height: 1;
+    color: var(--surface-item-text);
+    user-select: none;
+    padding: 0.625rem 1rem;
+    border-radius: var(--border-radius-sm);
+    border-width: var(--border-width-thin);
+    border-style: var(--border-style-solid);
+    background-color: var(--surface-panel-elevated);
+    border-color: var(--surface-panel-border);
+    box-shadow: var(--shadow-xs);
+    will-change: transform, opacity;
+    animation: var(--transition-normal);
+  }
+
+  /* Dark mode handled by semantic tokens in theme layer */
+
+  .tooltip[data-state="delayed-open"][data-side="top"] :global {
+    animation-name: slideDownAndFade;
+  }
+
+  .tooltip[data-state="delayed-open"][data-side="right"] :global {
+    animation-name: slideLeftAndFade;
+  }
+
+
+  .tooltip[data-state="delayed-open"][data-side="left"] :global {
+    animation-name: slideRightAndFade;
+  }
+
+  .tooltip[data-state="delayed-open"][data-side="bottom"] :global {
+    animation-name: slideUpAndFade;
+
+  }
+
+  .tooltip-arrow {
+    fill: var(--surface-panel-border);
+  }
+
+  /* Dark mode handled by semantic tokens in theme layer */
+}

package/dist/icons/check-icon.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  width?: string
+  height?: string
+  menuItem?: boolean
+  svgClass?: string
+}
+
+import IconElement from './icon-element.astro'
+import styles from './icons.module.css'
+
+const { class: className, width, height, svgClass: svgClassName, menuItem, ...rest } = Astro.props
+---
+
+<IconElement
+  class:list={['check-icon', className]}
+  width={width}
+  height={height}
+  menuItem={menuItem}
+  {...rest}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 15 15"
+    class:list={[styles['fill-current'], svgClassName]}
+    focusable="false"
+    aria-hidden="true"
+  >
+    <path
+      d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"></path>
+  </svg>
+</IconElement>

package/dist/icons/close-icon.astro

@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  width?: string
+  height?: string
+  menuItem?: boolean
+  svgClass?: string
+}
+
+import IconElement from './icon-element.astro'
+import styles from './icons.module.css'
+
+const { class: className, width, height, svgClass: svgClassName, menuItem, ...rest } = Astro.props
+---
+
+<IconElement
+  class:list={['close-icon', className]}
+  width={width}
+  height={height}
+  menuItem={menuItem}
+  {...rest}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 15 15"
+    class:list={[styles['fill-current'], svgClassName]}
+    focusable="false"
+    aria-hidden="true"
+    {...rest}
+  >
+    <path
+      d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"></path>
+  </svg>
+</IconElement>

package/dist/icons/icon-element.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  width?: string
+  height?: string
+  menuItem?: boolean
+}
+
+const { class: className, width = '22px', height = '22px', menuItem = false, ...rest } = Astro.props
+---
+
+<div
+  style={{
+    width,
+    height,
+    flex: `0 0 ${width}`,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: menuItem ? '1.2rem' : '0'
+  }}
+  class={className}
+  {...rest}
+>
+  <slot />
+</div>

package/dist/icons/icons.module.css

@@ -0,0 +1,155 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
+
+@layer infonomic-components {
+
+  .element-root svg {
+    display: block;
+    margin: auto;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .stroke-none {
+    stroke: none;
+  }
+
+  .stroke-current {
+    stroke: currentColor;
+  }
+
+  .stroke-gray {
+    stroke: var(--gray-800);
+  }
+
+  .stroke-gray:is(:global(.dark) *) {
+    stroke: var(--gray-300);
+  }
+
+  .stroke-contrast {
+    stroke: var(--gray-950);
+  }
+
+  .stroke-contrast:is(:global(.dark) *) {
+    stroke: var(--gray-100);
+  }
+
+  .stroke-primary {
+    stroke: var(--primary-500);
+  }
+
+  .stroke-primary:is(:global(.dark) *) {
+    stroke: var(--primary-400);
+  }
+
+  .stroke-secondary {
+    stroke: var(--secondary-500);
+  }
+
+  .stroke-secondary:is(:global(.dark) *) {
+    stroke: var(--secondary-400);
+  }
+
+  .stroke-success {
+    stroke: var(--green-500);
+  }
+
+  .stroke-success:is(:global(.dark) *) {
+    stroke: var(--green-400);
+  }
+
+  .stroke-info {
+    stroke: var(--blue-500);
+  }
+
+  .stroke-info:is(:global(.dark) *) {
+    stroke: var(--blue-400);
+  }
+
+  .stroke-warning {
+    stroke: var(--yellow-500);
+  }
+
+  .stroke-warning:is(:global(.dark) *) {
+    stroke: var(--yellow-400);
+  }
+
+  .stroke-danger {
+    stroke: var(--red-500);
+  }
+
+  .stroke-danger:is(:global(.dark) *) {
+    stroke: var(--red-400);
+  }
+
+  .fill-none {
+    fill: none;
+  }
+
+  .fill-current {
+    fill: currentColor;
+  }
+
+  .fill-contrast {
+    fill: black;
+  }
+
+  .fill-contrast:is(:global(.dark) *) {
+    fill: white;
+  }
+
+  .fill-gray {
+    stroke: var(--gray-700);
+  }
+
+  .fill-gray:is(:global(.dark) *) {
+    stroke: var(--gray-300);
+  }
+
+  .fill-primary {
+    fill: var(--primary-500);
+  }
+
+  .fill-primary:is(:global(.dark) *) {
+    fill: var(--primary-400);
+  }
+
+  .fill-secondary {
+    fill: var(--secondary-500);
+  }
+
+  .fill-secondary:is(:global(.dark) *) {
+    fill: var(--secondary-400);
+  }
+
+  .fill-success {
+    fill: var(--green-500);
+  }
+
+  .fill-success:is(:global(.dark) *) {
+    fill: var(--green-400);
+  }
+
+  .fill-info {
+    fill: var(--blue-500);
+  }
+
+  .fill-info:is(:global(.dark) *) {
+    fill: var(--blue-400);
+  }
+
+  .fill-warning {
+    fill: var(--yellow-500);
+  }
+
+  .fill-warning:is(:global(.dark) *) {
+    fill: var(--yellow-400);
+  }
+
+  .fill-danger {
+    fill: var(--red-500);
+  }
+
+  .fill-danger:is(:global(.dark) *) {
+    fill: var(--red-400);
+  }
+}

package/dist/icons/light-icon.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  width?: string
+  height?: string
+  menuItem?: boolean
+  svgClass?: string
+}
+
+import IconElement from './icon-element.astro'
+import styles from './icons.module.css'
+
+const { class: className, width, height, svgClass: svgClassName, menuItem, ...rest } = Astro.props
+---
+
+<IconElement
+  class:list={['light-icon', className]}
+  width={width}
+  height={height}
+  menuItem={menuItem}
+  {...rest}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    class:list={[styles['fill-current'], styles['stroke-none'], svgClassName]}
+    focusable="false"
+    aria-hidden="true"
+  >
+    <path
+      d="M12 9c1.65 0 3 1.35 3 3s-1.35 3-3 3-3-1.35-3-3 1.35-3 3-3m0-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"
+    ></path>
+  </svg>
+</IconElement>

package/dist/icons/moon-icon.astro

@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  width?: string
+  height?: string
+  menuItem?: boolean
+  svgClass?: string
+}
+
+import IconElement from './icon-element.astro'
+import styles from './icons.module.css'
+
+const { class: className, width, height, svgClass: svgClassName, menuItem, ...rest } = Astro.props
+---
+
+<IconElement
+  class:list={['moon-icon', className]}
+  width={width}
+  height={height}
+  menuItem={menuItem}
+  {...rest}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    class:list={[styles['fill-none'], styles['stroke-current'], svgClassName]}
+    focusable="false"
+    aria-hidden="true"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width={1.75}
+    {...rest}
+  >
+    <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
+  </svg>
+</IconElement>

package/dist/icons/search-icon.astro

@@ -0,0 +1,40 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  width?: string
+  height?: string
+  menuItem?: boolean
+  svgClass?: string
+}
+
+import IconElement from './icon-element.astro'
+import styles from './icons.module.css'
+
+const { class: className, width, height, svgClass: svgClassName, menuItem, ...rest } = Astro.props
+---
+
+<IconElement
+  class:list={['search-icon', className]}
+  width={width}
+  height={height}
+  menuItem={menuItem}
+  {...rest}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    class:list={[styles['fill-current'], styles['stroke-none'], svgClassName]}
+    focusable="false"
+    aria-hidden="true"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width={1.75}
+    {...rest}
+  >
+    <path
+      d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+    ></path>
+  </svg>
+</IconElement>