@frame-ui-ng/components 0.1.0-beta.0

package/table/src/styles/table.css

@@ -0,0 +1,245 @@
+@import './_vars.css';
+
+[frTableContainer],
+frame-table-container {
+  display: block;
+  max-inline-size: 100%;
+  overflow: auto;
+  border-radius: var(--frame-table-radius);
+}
+
+[frTable],
+frame-table,
+.frame-table {
+  inline-size: 100%;
+  min-inline-size: max-content;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: var(--frame-table-bg);
+  color: var(--frame-table-color);
+  font-size: var(--frame-table-cell-font-size);
+  line-height: var(--frame-table-cell-line-height);
+  text-align: start;
+}
+
+[frTable][data-variant='outline'],
+frame-table[data-variant='outline'],
+.frame-table[data-variant='outline'] {
+  border: 1px solid var(--frame-table-border);
+  border-radius: var(--frame-table-radius);
+}
+
+[frTable][data-variant='card'],
+frame-table[data-variant='card'],
+.frame-table[data-variant='card'] {
+  border: 1px solid var(--frame-table-border);
+  border-radius: var(--frame-table-radius);
+  box-shadow: var(--frame-table-shadow);
+}
+
+[frTableCaption],
+frame-table-caption,
+caption[frTableCaption],
+.frame-table__caption {
+  caption-side: bottom;
+  padding-block: 0.75rem;
+  color: var(--frame-table-caption-color);
+  font-size: var(--frame-table-caption-font-size);
+  text-align: start;
+}
+
+[frTableHeader],
+frame-table-header,
+thead[frTableHeader],
+.frame-table__header {
+  background: var(--frame-table-header-bg);
+}
+
+[frTableFooter],
+frame-table-footer,
+tfoot[frTableFooter],
+.frame-table__footer {
+  background: var(--frame-table-footer-bg);
+  font-weight: var(--frame-table-footer-font-weight);
+}
+
+tr[frHeaderRow],
+tr[frRow],
+tr[frFooterRow],
+frame-header-row,
+frame-row,
+frame-footer-row,
+.frame-table__row {
+  transition: background-color var(--frame-table-transition-duration) ease;
+}
+
+tr[frHeaderRow] > *,
+tr[frRow] > *,
+tr[frFooterRow] > *,
+.frame-table__row > * {
+  border-block-end: 1px solid var(--frame-table-row-border);
+}
+
+tbody[frTableBody] tr:last-child > *,
+[frTableBody] .frame-table__row:last-child > *,
+frame-table-body .frame-table__row:last-child > * {
+  border-block-end: 0;
+}
+
+[frTable][data-hover='true'] tr[frRow]:hover,
+frame-table[data-hover='true'] frame-row:hover,
+.frame-table[data-hover='true'] .frame-table__row:hover {
+  background: var(--frame-table-row-hover-bg);
+}
+
+[frTable][data-striped='true'] tbody tr:nth-child(even),
+frame-table[data-striped='true'] frame-row:nth-child(even),
+.frame-table[data-striped='true'] .frame-table__body .frame-table__row:nth-child(even) {
+  background: var(--frame-table-row-striped-bg);
+}
+
+tr[frRow][data-selected='true'],
+frame-row[data-selected='true'],
+.frame-table__row[data-selected='true'] {
+  background: var(--frame-table-row-selected-bg);
+}
+
+th[frHeaderCell],
+td[frCell],
+td[frFooterCell],
+frame-header-cell,
+frame-cell,
+frame-footer-cell,
+.frame-table__head,
+.frame-table__cell {
+  padding-block: var(--frame-table-cell-padding-block);
+  padding-inline: var(--frame-table-cell-padding-inline);
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+th[frHeaderCell],
+frame-header-cell,
+.frame-table__head {
+  color: var(--frame-table-header-color);
+  font-size: var(--frame-table-header-font-size);
+  font-weight: var(--frame-table-header-font-weight);
+  text-align: start;
+  text-transform: none;
+}
+
+td[frFooterCell],
+frame-footer-cell,
+.frame-table__footer-cell {
+  font-weight: var(--frame-table-footer-font-weight);
+}
+
+[frTable][data-density='sm'],
+frame-table[data-density='sm'],
+.frame-table[data-density='sm'] {
+  --frame-table-cell-padding-block: 0.5rem;
+  --frame-table-cell-padding-inline: 0.75rem;
+  --frame-table-cell-font-size: 0.8125rem;
+}
+
+[frTable][data-density='lg'],
+frame-table[data-density='lg'],
+.frame-table[data-density='lg'] {
+  --frame-table-cell-padding-block: 1rem;
+  --frame-table-cell-padding-inline: 1.125rem;
+  --frame-table-cell-font-size: 0.9375rem;
+}
+
+[frTableNumeric],
+.frame-table__numeric {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.frame-table__muted {
+  color: var(--frame-muted-foreground);
+}
+
+.frame-table__sticky,
+.cdk-table-sticky {
+  z-index: 2;
+  background: var(--frame-table-bg);
+  background-clip: padding-box;
+  box-shadow: var(--frame-table-sticky-shadow);
+}
+
+thead .cdk-table-sticky,
+tfoot .cdk-table-sticky,
+tr[frHeaderRow].cdk-table-sticky,
+tr[frFooterRow].cdk-table-sticky,
+.frame-table__header-row .cdk-table-sticky,
+.frame-table__footer-row .cdk-table-sticky {
+  z-index: 3;
+  background: var(--frame-table-header-bg);
+}
+
+thead .cdk-table-sticky.cdk-table-sticky-border-elem-left,
+thead .cdk-table-sticky.cdk-table-sticky-border-elem-right {
+  z-index: 4;
+}
+
+tfoot .cdk-table-sticky,
+tr[frFooterRow].cdk-table-sticky,
+.frame-table__footer-row .cdk-table-sticky {
+  background: var(--frame-table-footer-bg);
+}
+
+[frTable][data-hover='true'] tr[frRow]:hover .cdk-table-sticky,
+.frame-table[data-hover='true'] .frame-table__row:hover .cdk-table-sticky {
+  background: var(--frame-table-row-hover-bg);
+}
+
+[frTableVirtual],
+.frame-table-virtual {
+  display: grid;
+  min-inline-size: 100%;
+  border: 1px solid var(--frame-table-border);
+  border-radius: var(--frame-table-radius);
+  background: var(--frame-table-bg);
+  color: var(--frame-table-color);
+  overflow: hidden;
+}
+
+[frTableVirtualHeader],
+[frTableVirtualRow],
+.frame-table-virtual__header,
+.frame-table-virtual__row {
+  display: grid;
+  grid-template-columns: var(--frame-table-virtual-columns, repeat(4, minmax(8rem, 1fr)));
+  align-items: center;
+  min-inline-size: max-content;
+}
+
+[frTableVirtualHeader],
+.frame-table-virtual__header {
+  background: var(--frame-table-header-bg);
+  color: var(--frame-table-header-color);
+  font-size: var(--frame-table-header-font-size);
+  font-weight: var(--frame-table-header-font-weight);
+}
+
+[frTableVirtualRow],
+.frame-table-virtual__row {
+  border-block-end: 1px solid var(--frame-table-row-border);
+  transition: background-color var(--frame-table-transition-duration) ease;
+}
+
+[frTableVirtualRow]:hover,
+.frame-table-virtual__row:hover {
+  background: var(--frame-table-row-hover-bg);
+}
+
+[frTableVirtualCell],
+.frame-table-virtual__cell {
+  min-inline-size: 0;
+  padding-block: var(--frame-table-cell-padding-block);
+  padding-inline: var(--frame-table-cell-padding-inline);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/tabs/src/styles/_vars.css

@@ -0,0 +1,23 @@
+:root {
+  --frame-tabs-gap: 1rem;
+  --frame-tabs-list-gap: 0.25rem;
+  --frame-tabs-list-padding: 0.25rem;
+  --frame-tabs-list-bg: var(--frame-muted, #f4f4f5);
+  --frame-tabs-list-border: transparent;
+  --frame-tabs-list-radius: var(--frame-radius-lg, 0.75rem);
+  --frame-tabs-trigger-height: 2.25rem;
+  --frame-tabs-trigger-padding-x: 0.875rem;
+  --frame-tabs-trigger-radius: var(--frame-radius-md, 0.5rem);
+  --frame-tabs-trigger-bg: transparent;
+  --frame-tabs-trigger-color: var(--frame-muted-foreground, #71717a);
+  --frame-tabs-trigger-hover-bg: color-mix(in srgb, var(--frame-background, #fff) 62%, transparent);
+  --frame-tabs-trigger-hover-color: var(--frame-foreground, #09090b);
+  --frame-tabs-trigger-active-bg: var(--frame-background, #fff);
+  --frame-tabs-trigger-active-color: var(--frame-foreground, #09090b);
+  --frame-tabs-trigger-active-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
+  --frame-tabs-trigger-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring, #18181b) 28%, transparent);
+  --frame-tabs-trigger-disabled-opacity: 0.5;
+  --frame-tabs-line-color: var(--frame-border, #e5e7eb);
+  --frame-tabs-line-active-color: var(--frame-primary, #18181b);
+  --frame-tabs-content-padding: 1rem 0 0;
+}

package/tabs/src/styles/tabs.css

@@ -0,0 +1,164 @@
+@import './_vars.css';
+
+[frTabs],
+frame-tabs {
+  display: grid;
+  gap: var(--frame-tabs-gap);
+}
+
+[frTabs][data-orientation='vertical'],
+frame-tabs[data-orientation='vertical'] {
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+}
+
+[frTabsList],
+frame-tabs-list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--frame-tabs-list-gap);
+  width: fit-content;
+  padding: var(--frame-tabs-list-padding);
+  border: 1px solid var(--frame-tabs-list-border);
+  border-radius: var(--frame-tabs-list-radius);
+  background: var(--frame-tabs-list-bg);
+}
+
+[frTabsList][data-orientation='vertical'],
+frame-tabs-list[data-orientation='vertical'] {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+[frTabsList][data-variant='line'],
+frame-tabs-list[data-variant='line'] {
+  gap: 1rem;
+  padding: 0;
+  border-block-end: 1px solid var(--frame-tabs-line-color);
+  border-radius: 0;
+  background: transparent;
+}
+
+[frTabsTrigger],
+frame-tabs-trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--frame-tabs-trigger-height);
+  gap: 0.5rem;
+  padding-inline: var(--frame-tabs-trigger-padding-x);
+  border: 0;
+  border-radius: var(--frame-tabs-trigger-radius);
+  background: var(--frame-tabs-trigger-bg);
+  color: var(--frame-tabs-trigger-color);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition:
+    background-color 160ms ease,
+    box-shadow 180ms ease,
+    color 160ms ease,
+    transform 180ms ease;
+  white-space: nowrap;
+}
+
+[frTabsTrigger]:hover,
+frame-tabs-trigger:hover {
+  background: var(--frame-tabs-trigger-hover-bg);
+  color: var(--frame-tabs-trigger-hover-color);
+}
+
+[frTabsTrigger][data-active],
+[frTabsTrigger].active,
+[frTabsTrigger].router-link-active,
+frame-tabs-trigger[data-active] {
+  background: var(--frame-tabs-trigger-active-bg);
+  color: var(--frame-tabs-trigger-active-color);
+  box-shadow: var(--frame-tabs-trigger-active-shadow);
+  transform: translateY(-1px);
+}
+
+[frTabsTrigger]:focus-visible,
+frame-tabs-trigger:focus-visible {
+  outline: 0;
+  box-shadow: var(--frame-tabs-trigger-focus-shadow);
+}
+
+[frTabsTrigger][data-disabled],
+frame-tabs-trigger[data-disabled] {
+  cursor: not-allowed;
+  opacity: var(--frame-tabs-trigger-disabled-opacity);
+}
+
+[frTabsList][data-variant='line'] [frTabsTrigger],
+frame-tabs-list[data-variant='line'] frame-tabs-trigger {
+  min-height: calc(var(--frame-tabs-trigger-height) + 0.125rem);
+  padding-inline: 0;
+  border-radius: 0;
+  transform: none;
+}
+
+[frTabsList][data-variant='line'] [frTabsTrigger]::after,
+frame-tabs-list[data-variant='line'] frame-tabs-trigger::after {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: -1px;
+  height: 2px;
+  border-radius: 999px;
+  background: var(--frame-tabs-line-active-color);
+  content: '';
+  opacity: 0;
+  transform: scaleX(0);
+  transform-origin: center;
+  transition:
+    opacity 160ms ease,
+    transform 180ms ease;
+}
+
+[frTabsList][data-variant='line'] [frTabsTrigger][data-active],
+[frTabsList][data-variant='line'] [frTabsTrigger].active,
+[frTabsList][data-variant='line'] [frTabsTrigger].router-link-active,
+frame-tabs-list[data-variant='line'] frame-tabs-trigger[data-active] {
+  background: transparent;
+  box-shadow: none;
+  transform: none;
+}
+
+[frTabsList][data-variant='line'] [frTabsTrigger][data-active]::after,
+[frTabsList][data-variant='line'] [frTabsTrigger].active::after,
+[frTabsList][data-variant='line'] [frTabsTrigger].router-link-active::after,
+frame-tabs-list[data-variant='line'] frame-tabs-trigger[data-active]::after {
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [frTabsTrigger],
+  frame-tabs-trigger,
+  [frTabsList][data-variant='line'] [frTabsTrigger]::after,
+  frame-tabs-list[data-variant='line'] frame-tabs-trigger::after {
+    transition: none;
+  }
+
+  [frTabsTrigger][data-active],
+  [frTabsTrigger].active,
+  [frTabsTrigger].router-link-active,
+  frame-tabs-trigger[data-active] {
+    transform: none;
+  }
+}
+
+[frTabsContent],
+frame-tabs-content {
+  display: block;
+  min-width: 0;
+  padding: var(--frame-tabs-content-padding);
+}
+
+[frTabsContent][hidden],
+frame-tabs-content[hidden] {
+  display: none;
+}

package/textarea/src/styles/_vars.css

@@ -0,0 +1,20 @@
+:root {
+  --frame-textarea-root-min-height: 5rem;
+  --frame-textarea-root-radius: var(--frame-radius-md);
+  --frame-textarea-root-bg: var(--frame-surface);
+  --frame-textarea-root-color: var(--frame-surface-foreground);
+  --frame-textarea-root-border: var(--frame-border);
+  --frame-textarea-root-font-size: 0.875rem;
+  --frame-textarea-root-padding-block: 0.625rem;
+  --frame-textarea-root-padding-inline: 0.875rem;
+  --frame-textarea-root-placeholder-color: var(--frame-muted-foreground);
+  --frame-textarea-root-hover-border: color-mix(in srgb, var(--frame-border) 80%, var(--frame-foreground));
+  --frame-textarea-root-focus-border: color-mix(in srgb, var(--frame-ring) 70%, var(--frame-border));
+  --frame-textarea-root-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 22%, transparent);
+  --frame-textarea-root-invalid-border: color-mix(in srgb, var(--frame-destructive) 65%, var(--frame-border));
+  --frame-textarea-root-invalid-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-destructive) 14%, transparent);
+  --frame-textarea-root-disabled-opacity: 0.55;
+  --frame-textarea-root-readonly-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
+  --frame-textarea-root-transition-duration: 150ms;
+  --frame-textarea-root-resize: vertical;
+}

package/textarea/src/styles/textarea.css

@@ -0,0 +1,60 @@
+@import './_vars.css';
+
+[frTextarea] {
+  box-sizing: border-box;
+  appearance: none;
+  -webkit-appearance: none;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: var(--frame-textarea-root-min-height);
+  border: 1px solid var(--frame-textarea-root-border);
+  border-radius: var(--frame-textarea-root-radius);
+  background: var(--frame-textarea-root-bg);
+  color: var(--frame-textarea-root-color);
+  box-shadow: none;
+  cursor: text;
+  font: inherit;
+  font-size: var(--frame-textarea-root-font-size);
+  line-height: 1.5;
+  margin: 0;
+  outline: none;
+  padding-block: var(--frame-textarea-root-padding-block);
+  padding-inline: var(--frame-textarea-root-padding-inline);
+  resize: var(--frame-textarea-root-resize);
+  transition:
+    background-color var(--frame-textarea-root-transition-duration) ease,
+    border-color var(--frame-textarea-root-transition-duration) ease,
+    box-shadow var(--frame-textarea-root-transition-duration) ease,
+    color var(--frame-textarea-root-transition-duration) ease,
+    opacity var(--frame-textarea-root-transition-duration) ease;
+}
+
+[frTextarea]::placeholder {
+  color: var(--frame-textarea-root-placeholder-color);
+}
+
+[frTextarea]:where(:not(:disabled)):hover {
+  border-color: var(--frame-textarea-root-hover-border);
+}
+
+[frTextarea]:focus-visible {
+  border-color: var(--frame-textarea-root-focus-border);
+  box-shadow: var(--frame-textarea-root-focus-shadow);
+}
+
+[frTextarea][aria-invalid='true'],
+[frTextarea].ng-invalid.ng-touched,
+[frTextarea].ng-invalid.ng-dirty {
+  border-color: var(--frame-textarea-root-invalid-border);
+  box-shadow: var(--frame-textarea-root-invalid-shadow);
+}
+
+[frTextarea]:disabled {
+  cursor: not-allowed;
+  opacity: var(--frame-textarea-root-disabled-opacity);
+}
+
+[frTextarea]:read-only {
+  background: var(--frame-textarea-root-readonly-bg);
+}

package/toast/src/styles/_vars.css

@@ -0,0 +1,47 @@
+:root {
+  --frame-toast-viewport-inset: 1rem;
+  --frame-toast-viewport-width: min(100vw - 2rem, 26rem);
+  --frame-toast-stack-offset: 0.875rem;
+  --frame-toast-stack-depth: 2.25rem;
+  --frame-toast-stack-scale-step: 0.025;
+  --frame-toast-stack-expanded-gap: 0.75rem;
+  --frame-toast-stack-expanded-depth: 28rem;
+  --frame-toast-padding: 0.875rem 0.5rem 0.875rem 0.875rem;
+  --frame-toast-gap: 0.75rem;
+  --frame-toast-radius: var(--frame-radius-lg);
+  --frame-toast-bg: var(--frame-surface);
+  --frame-toast-color: var(--frame-foreground);
+  --frame-toast-border: var(--frame-border);
+  --frame-toast-shadow: 0 18px 45px rgb(0 0 0 / 0.14);
+  --frame-toast-title-font-size: 0.875rem;
+  --frame-toast-title-font-weight: 650;
+  --frame-toast-description-font-size: 0.8125rem;
+  --frame-toast-description-color: var(--frame-muted-foreground);
+  --frame-toast-status-size: 0.625rem;
+  --frame-toast-status-bg: var(--frame-muted-foreground);
+  --frame-toast-action-bg: var(--frame-primary);
+  --frame-toast-action-color: var(--frame-primary-foreground);
+  --frame-toast-action-hover-bg: color-mix(in srgb, var(--frame-primary) 88%, black);
+  --frame-toast-action-radius: var(--frame-radius-md);
+  --frame-toast-close-size: 1.75rem;
+  --frame-toast-close-icon-size: 1rem;
+  --frame-toast-close-color: var(--frame-muted-foreground);
+  --frame-toast-close-hover-bg: var(--frame-accent);
+  --frame-toast-motion-duration: 180ms;
+  --frame-toast-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --frame-toast-stack-transition-duration: 220ms;
+  --frame-toast-stack-transition-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --frame-toast-success-bg: color-mix(in srgb, #16a34a 10%, var(--frame-surface));
+  --frame-toast-success-border: color-mix(in srgb, #16a34a 26%, var(--frame-border));
+  --frame-toast-success-status-bg: #16a34a;
+  --frame-toast-info-bg: color-mix(in srgb, #2563eb 10%, var(--frame-surface));
+  --frame-toast-info-border: color-mix(in srgb, #2563eb 26%, var(--frame-border));
+  --frame-toast-info-status-bg: #2563eb;
+  --frame-toast-warning-bg: color-mix(in srgb, #f59e0b 12%, var(--frame-surface));
+  --frame-toast-warning-border: color-mix(in srgb, #f59e0b 30%, var(--frame-border));
+  --frame-toast-warning-status-bg: #f59e0b;
+  --frame-toast-error-bg: color-mix(in srgb, #dc2626 10%, var(--frame-surface));
+  --frame-toast-error-border: color-mix(in srgb, #dc2626 30%, var(--frame-border));
+  --frame-toast-error-status-bg: #dc2626;
+  --frame-toast-loading-status-bg: var(--frame-primary);
+}