@infonomic/uikit 5.2.1 → 5.4.0

package/dist/components/forms/label.module.css

@@ -0,0 +1,15 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .label,
+  :global(.label) {
+    display: block;
+    font-weight: 500;
+    color: var(--text)
+  }
+
+  .required,
+  :global(.label-required) {
+    color: var(--error);
+  }
+}

package/dist/components/forms/radio-group.module.css

@@ -0,0 +1,163 @@
+@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 {
+
+  .column {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-2);
+  }
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    gap: var(--gap-2);
+  }
+
+  .item-container {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-2);
+  }
+
+  .item {
+    all: unset;
+    width: 18px;
+    height: 18px;
+    border-radius: var(--border-radius-full);
+    border: 2px solid var(--radio-border);
+    transition: all var(--transition-normal);
+  }
+
+  .item[data-state="checked"] {
+    --ring-offset-color: var(--background);
+    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
+    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+  }
+
+  .item:disabled,
+  .item[disabled] {
+    pointer-events: none;
+  }
+
+  /* Style for the "checked" state */
+  .indicator[data-state="checked"] {
+    animation: radioIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  /* Style for the "unchecked" state */
+  .indicator[data-state="unchecked"] {
+    animation: radioOut 0.2s ease-in;
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  .indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    &::after {
+      content: "";
+      display: block;
+      width: 11px;
+      height: 11px;
+      border-radius: 50%;
+      background-color: var(--radio-indicator-color);
+    }
+  }
+
+  .label {
+    color: var(--foreground);
+    font-size: 15px;
+    line-height: 1;
+    padding-left: var(--spacing-8);
+  }
+
+  .row .label {
+    padding-left: 0;
+    padding-right: var(--spacing-16)
+  }
+
+
+  /* Intents */
+  .primary {
+    --radio-border: var(--fill-primary-strong);
+    --radio-indicator-color: var(--fill-primary-strong);
+  }
+
+  .secondary {
+    --radio-border: var(--fill-secondary-strong);
+    --radio-indicator-color: var(--fill-secondary-strong);
+  }
+
+  .noeffect {
+    --radio-border: var(--fill-noeffect-strong);
+    --radio-indicator-color: var(--fill-noeffect-strong);
+  }
+
+  .success {
+    --radio-border: var(--fill-success-strong);
+    --radio-indicator-color: var(--fill-success-strong);
+  }
+
+  .info {
+    --radio-border: var(--fill-info-strong);
+    --radio-indicator-color: var(--fill-info-strong);
+  }
+
+  .warning {
+    --radio-border: var(--fill-warning-strong);
+    --radio-indicator-color: var(--fill-warning-strong);
+  }
+
+  .danger {
+    --radio-border: var(--fill-danger-strong);
+    --radio-indicator-color: var(--fill-danger-strong);
+  }
+
+  /* Dark mode handled by semantic tokens in theme layer */
+
+  @keyframes radioIn {
+    0% {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+
+    50% {
+      opacity: 1;
+      transform: scale(1.2);
+      /* Overshoot */
+    }
+
+    80% {
+      transform: scale(0.9);
+      /* Slight bounce back */
+    }
+
+    100% {
+      transform: scale(1);
+      /* Settle */
+    }
+  }
+
+  /* Define keyframes for the "unchecked" state */
+  @keyframes radioOut {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+  }
+}

package/dist/components/forms/select.module.css

@@ -0,0 +1,68 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .content {
+    z-index: 50;
+  }
+
+  .viewport {
+    z-index: 50;
+    margin-top: 2px;
+    border: 1px solid var(--surface-panel-border);
+    box-shadow: var(--shadow-md);
+    border-radius: var(--border-radius-md);
+    background-color: var(--surface-panel-elevated);
+    padding: 6px;
+  }
+
+  .group {
+    z-index: 50;
+  }
+
+  .scroll-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--surface-item-text);
+    border: 1px solid var(--surface-panel-border);
+    box-shadow: var(--shadow-md);
+    border-radius: var(--border-radius-md);
+    background-color: var(--surface-panel-elevated);
+    padding: 2px;
+  }
+
+  .select-item {
+    position: relative;
+    user-select: none;
+    color: var(--surface-item-text);
+    background-color: var(--surface-item);
+    font-size: 1rem;
+    line-height: 1;
+    padding-right: 35px;
+    padding-left: 25px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+  }
+
+  .select-item[data-disabled] {
+    color: var(--surface-item-text-disabled);
+    pointer-events: none;
+  }
+
+  .select-item[data-highlighted] {
+    outline: none;
+    background-color: var(--surface-item-hover);
+    color: var(--surface-item-text-hover);
+  }
+
+  .select-item-indicator {
+    position: absolute;
+    left: 0;
+    width: 25px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/dist/components/forms/text-area.module.css

@@ -0,0 +1,10 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .text-area,
+  :global(.text-area) {
+    font-size: 1.1rem;
+    width: 100%;
+    padding: 0.5rem;
+  }
+}

package/dist/components/hamburger/hamburger.astro

@@ -0,0 +1,30 @@
+---
+// SEE: uikit/src/styles/components/hamburger.css
+
+// NOTE: we don't use open or color props in Astro.
+// Instead we set open / closed state via nanostores.
+// and then apply global classes according.
+// Class overrides for inner span colors are set in
+// Astro app.css
+
+interface HamburgerProps {
+  class?: string
+  ariaLabel?: string
+  ariaControls?: string
+}
+
+const { class: className, ariaLabel, ariaControls } = Astro.props as HamburgerProps
+---
+
+<button
+  id="component--hamburger"
+  class:list={['component--hamburger', className]}
+  tabindex="0"
+  aria-label={ariaLabel}
+  aria-controls={ariaControls}
+  aria-haspopup="true"
+>
+  <span class="box" aria-hidden="true">
+    <span class="inner"></span>
+  </span>
+</button>

package/dist/components/notifications/alert.module.css

@@ -0,0 +1,110 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .alert {
+    display: flex;
+    align-items: start;
+    width: 100%;
+    gap: var(--gap-2);
+    border-radius: var(--border-radius-md);
+    padding: 16px;
+    font-family: inherit;
+    font-weight: normal;
+    transition: all 0.3s ease-in-out;
+    border: 1px solid var(--alert-border);
+    background-color: var(--alert-background);
+    margin-bottom: 1rem;
+  }
+
+  .alert-with-title {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    min-width: 24px;
+    min-height: 24px;
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    margin-left: auto;
+    margin-top: -2px;
+  }
+
+  .fade {
+    opacity: 0;
+    transition: opacity 0.4s ease-in-out;
+  }
+
+  .header {
+    display: flex;
+    align-items: start;
+    width: 100%;
+    margin-bottom: var(--spacing-8);
+    gap: var(--gap-2);
+  }
+
+  .title {
+    display: flex;
+    font-weight: bold;
+    font-size: 1.2rem;
+    line-height: 1;
+    padding-top: 1px;
+  }
+
+  .content {
+    padding-top: 1px;
+    font-size: var(--font-size-sm);
+  }
+
+  .content:first-child {
+    margin-top: 0;
+  }
+
+  /* Intents */
+  .primary {
+    --alert-border: var(--stroke-primary);
+    --alert-background: var(--fill-primary-weak);
+  }
+
+  .secondary {
+    --alert-border: var(--stroke-secondary);
+    --alert-background: var(--fill-secondary-weak);
+  }
+
+  .noeffect {
+    --alert-border: var(--stroke-noeffect);
+    --alert-background: var(--fill-noeffect-weak);
+  }
+
+  .success {
+    --alert-border: var(--stroke-success);
+    --alert-background: var(--fill-success-weak);
+  }
+
+  .info {
+    --alert-border: var(--stroke-info);
+    --alert-background: var(--fill-info-weak);
+  }
+
+  .warning {
+    --alert-border: var(--stroke-warning);
+    --alert-background: var(--fill-warning-weak);
+  }
+
+  .danger {
+    --alert-border: var(--stroke-danger);
+    --alert-background: var(--fill-danger-weak);
+  }
+}

package/dist/components/notifications/toast.module.css

@@ -0,0 +1,237 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  /* Positions are relative to the toast viewport which is set 
+   globally in components/toast.css  */
+
+  .root {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-1);
+    padding-top: 12px;
+    padding-bottom: 16px;
+    background: var(--gray-25);
+    border-width: var(--border-width-thin);
+    border-color: var(--border-color);
+    border-style: var(--border-style-solid);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow-sm);
+  }
+
+  .root:is(:global(.dark) *) {
+    background: var(--canvas-800);
+  }
+
+  .root[data-state="open"] {
+    animation: slideInFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .root[data-state="closed"] {
+    animation: hide 100ms ease-in;
+  }
+
+  .root[data-swipe="move"] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+
+  .root[data-swipe="cancel"] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+  }
+
+  .root.top-right[data-swipe="end"],
+  .root.bottom-right[data-swipe="end"] {
+    animation: swipeOutToRight 100ms ease-out;
+  }
+
+  .root.top-left[data-swipe="end"],
+  .root.bottom-left[data-swipe="end"] {
+    animation: swipeOutToLeft 100ms ease-out;
+  }
+
+  .header {
+    display: flex;
+    padding: 0 16px 0 12px;
+    align-items: start;
+    gap: var(--gap-2);
+    justify-content: space-between;
+  }
+
+  .close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    min-width: 24px;
+    min-height: 24px;
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    margin-left: auto;
+    margin-top: -2px;
+  }
+
+  .close svg {
+    fill: white;
+  }
+
+
+  .title {
+    display: flex;
+    padding: 0 12px 0 8px;
+    align-items: start;
+    gap: var(--gap-2);
+    margin-bottom: 5px;
+    font-weight: 500;
+    font-size: 15px;
+  }
+
+  .description {
+    margin: 0;
+    padding: 0 8px 0 12px;
+    font-size: var(--font-size-sm);
+    line-height: 1.3;
+  }
+
+  .action {
+    display: flex;
+    justify-content: end;
+    padding: 0 12px 0 12px;
+  }
+
+  /* Positions are relative to the toast viewport which is set 
+   globally in components/toast.css  */
+
+  .top-left {
+    top: 88px;
+    right: 16px;
+    left: 16px;
+  }
+
+  .top-right {
+    top: 88px;
+    right: 16px;
+    left: 16px;
+  }
+
+  .bottom-left {
+    bottom: 16px;
+    right: 16px;
+    left: 16px;
+  }
+
+  .bottom-right {
+    bottom: 16px;
+    right: 16px;
+    left: 16px;
+  }
+
+  @media (min-width: 48rem) {
+
+    .root.top-right[data-state="open"],
+    .root.bottom-right[data-state="open"] {
+      animation: slideInFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    .root.top-left[data-state="open"],
+    .root.bottom-left[data-state="open"] {
+      animation: slideInFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    .bottom-right {
+      bottom: 16px;
+      right: 16px;
+      left: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+    .bottom-left {
+      bottom: 16px;
+      left: 16px;
+      right: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+    .top-left {
+      top: 88px;
+      left: 16px;
+      right: auto;
+      bottom: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+    .top-right {
+      top: 88px;
+      right: 16px;
+      bottom: auto;
+      left: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+  }
+
+  @keyframes slideInFromRight {
+    from {
+      transform: translateX(calc(100% + var(--viewport-padding)));
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideInFromLeft {
+    from {
+      transform: translateX(calc(-100% - var(--viewport-padding)));
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideInFromBottom {
+    from {
+      transform: translateY(calc(100% + var(--viewport-padding)));
+    }
+
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes swipeOutToRight {
+    from {
+      transform: translateX(var(--radix-toast-swipe-end-x));
+    }
+
+    to {
+      transform: translateX(calc(100% + var(--viewport-padding)));
+    }
+  }
+
+  @keyframes swipeOutToLeft {
+    from {
+      transform: translateX(var(--radix-toast-swipe-end-x));
+    }
+
+    to {
+      transform: translateX(calc(-100% - var(--viewport-padding)));
+    }
+  }
+
+  @keyframes hide {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+}

package/dist/components/overlay/overlay.module.css

@@ -0,0 +1,41 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(245, 245, 245, 0.35);
+  z-index: 20;
+}
+
+.overlay:is(:global(.dark) *) {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.animate-fade-in {
+  animation: fade-in 0.3s ease-in-out;
+}
+
+.animate-fade-out {
+  animation: fade-out 0.3s ease-in-out;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}