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

package/select/src/styles/select-trigger.css

@@ -0,0 +1,95 @@
+.frame-select__trigger {
+  --frame-select-trigger-bg: var(--frame-surface);
+  --frame-select-trigger-border: var(--frame-border);
+  --frame-select-trigger-color: var(--frame-surface-foreground);
+  --frame-select-trigger-hover-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
+  --frame-select-trigger-hover-border: color-mix(in srgb, var(--frame-border) 80%, var(--frame-foreground));
+  --frame-select-trigger-hover-color: var(--frame-select-trigger-color);
+  --frame-select-trigger-active-bg: color-mix(in srgb, var(--frame-surface) 65%, var(--frame-muted));
+  --frame-select-trigger-active-border: var(--frame-select-trigger-hover-border);
+  --frame-select-trigger-active-color: var(--frame-select-trigger-hover-color);
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  justify-self: start;
+  align-self: start;
+  width: 100%;
+  max-width: 100%;
+  min-height: var(--frame-select-trigger-height);
+  min-width: var(--frame-select-trigger-min-width);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--frame-select-trigger-gap);
+  border: 1px solid var(--frame-select-trigger-border);
+  border-radius: var(--frame-select-trigger-radius);
+  background: var(--frame-select-trigger-bg);
+  color: var(--frame-select-trigger-color);
+  cursor: pointer;
+  margin: 0;
+  padding-inline: var(--frame-select-trigger-padding-inline);
+  padding-block: 0;
+  font: inherit;
+  font-size: var(--frame-select-trigger-font-size);
+  font-weight: var(--frame-select-trigger-font-weight);
+  line-height: 1.25;
+  text-align: left;
+  text-decoration: none;
+  box-shadow: none;
+  transition:
+    border-color var(--frame-select-trigger-transition-duration) ease,
+    box-shadow var(--frame-select-trigger-transition-duration) ease,
+    background-color var(--frame-select-trigger-transition-duration) ease,
+    color var(--frame-select-trigger-transition-duration) ease,
+    opacity var(--frame-select-trigger-transition-duration) ease;
+}
+
+.frame-select__trigger:where(:not([data-disabled])):hover {
+  background: var(--frame-select-trigger-hover-bg);
+  border-color: var(--frame-select-trigger-hover-border);
+  color: var(--frame-select-trigger-hover-color);
+  filter: var(--frame-select-trigger-hover-filter);
+}
+
+.frame-select__trigger:where(:not([data-disabled])):active {
+  background: var(--frame-select-trigger-active-bg);
+  border-color: var(--frame-select-trigger-active-border);
+  color: var(--frame-select-trigger-active-color);
+  filter: var(--frame-select-trigger-active-filter);
+}
+
+.frame-select__trigger:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--frame-select-trigger-focus-shadow);
+}
+
+.frame-select__trigger[data-invalid] {
+  border-color: var(--frame-select-trigger-invalid-border);
+  box-shadow: var(--frame-select-trigger-invalid-shadow);
+}
+
+.frame-select__trigger[data-disabled] {
+  opacity: var(--frame-select-trigger-disabled-opacity);
+  pointer-events: none;
+}
+
+.frame-select__value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.frame-select__value[data-placeholder] {
+  color: var(--frame-muted-foreground);
+}
+
+.frame-select__icon {
+  display: flex;
+  flex: 0 0 auto;
+  color: var(--frame-muted-foreground);
+}
+
+.frame-select__trigger[data-state='open'] .frame-select__icon {
+  transform: rotate(180deg);
+}

package/select/src/styles/select.css

@@ -0,0 +1,5 @@
+@import './_vars.css';
+@import './select-trigger.css';
+@import './select-content.css';
+@import './select-item.css';
+@import './select-feedback.css';

package/separator/src/styles/_vars.css

@@ -0,0 +1,9 @@
+:root {
+  --frame-separator-color: var(--frame-border);
+  --frame-separator-thickness: 1px;
+  --frame-separator-radius: 999px;
+  --frame-separator-horizontal-width: 100%;
+  --frame-separator-horizontal-margin-block: 0;
+  --frame-separator-vertical-height: 100%;
+  --frame-separator-vertical-margin-inline: 0;
+}

package/separator/src/styles/separator.css

@@ -0,0 +1,25 @@
+@import './_vars.css';
+
+[frSeparator],
+frame-separator {
+  display: block;
+  flex-shrink: 0;
+  border: 0;
+  border-radius: var(--frame-separator-radius);
+  background: var(--frame-separator-color);
+}
+
+[frSeparator][data-orientation='horizontal'],
+frame-separator[data-orientation='horizontal'] {
+  inline-size: var(--frame-separator-horizontal-width);
+  block-size: var(--frame-separator-thickness);
+  margin-block: var(--frame-separator-horizontal-margin-block);
+}
+
+[frSeparator][data-orientation='vertical'],
+frame-separator[data-orientation='vertical'] {
+  inline-size: var(--frame-separator-thickness);
+  block-size: var(--frame-separator-vertical-height);
+  min-block-size: 1em;
+  margin-inline: var(--frame-separator-vertical-margin-inline);
+}

package/sheet/src/styles/_vars.css

@@ -0,0 +1,18 @@
+:root {
+  --frame-sheet-backdrop-blur: 2px;
+  --frame-sheet-backdrop-bg: rgb(0 0 0 / 0.5);
+  --frame-sheet-bg: var(--frame-background, #fff);
+  --frame-sheet-border: var(--frame-border, #e5e7eb);
+  --frame-sheet-color: var(--frame-foreground, #09090b);
+  --frame-sheet-muted-color: var(--frame-muted-foreground, #71717a);
+  --frame-sheet-shadow: 0 24px 80px rgb(0 0 0 / 0.2), 0 8px 24px rgb(0 0 0 / 0.14);
+  --frame-sheet-padding: 1.5rem;
+  --frame-sheet-gap: 1rem;
+  --frame-sheet-inline-size: min(100vw, 28rem);
+  --frame-sheet-block-size: min(100dvh, 28rem);
+  --frame-sheet-close-bg: transparent;
+  --frame-sheet-close-color: var(--frame-muted-foreground, #71717a);
+  --frame-sheet-close-hover-bg: var(--frame-muted, #f4f4f5);
+  --frame-sheet-close-hover-color: var(--frame-foreground, #09090b);
+  --frame-sheet-z-index: 1000;
+}

package/sheet/src/styles/sheet.css

@@ -0,0 +1,215 @@
+@import "./_vars.css";
+
+.cdk-overlay-backdrop.frame-sheet__backdrop {
+  backdrop-filter: blur(var(--frame-sheet-backdrop-blur));
+  background: var(--frame-sheet-backdrop-bg);
+}
+
+.cdk-global-overlay-wrapper:has(.frame-sheet__overlay-pane) {
+  z-index: var(--frame-sheet-z-index);
+}
+
+.frame-sheet__overlay-pane {
+  pointer-events: auto;
+}
+
+.frame-sheet__overlay-pane .cdk-dialog-container {
+  display: contents;
+  outline: none;
+}
+
+.frame-sheet__panel {
+  position: fixed;
+  z-index: var(--frame-sheet-z-index);
+  display: flex;
+  flex-direction: column;
+  gap: var(--frame-sheet-gap);
+  overflow: hidden;
+  border: 1px solid var(--frame-sheet-border);
+  background: var(--frame-sheet-bg);
+  box-shadow: var(--frame-sheet-shadow);
+  color: var(--frame-sheet-color);
+}
+
+.frame-sheet__panel[data-side="right"],
+.frame-sheet__panel[data-side="left"] {
+  inset-block: 0;
+  inline-size: var(--frame-sheet-inline-size);
+  max-inline-size: 100vw;
+}
+
+.frame-sheet__panel[data-side="right"] {
+  inset-inline-end: 0;
+  border-inline-end: 0;
+  animation: frame-sheet-enter-right 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.frame-sheet__panel[data-side="left"] {
+  inset-inline-start: 0;
+  border-inline-start: 0;
+  animation: frame-sheet-enter-left 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.frame-sheet__panel[data-side="top"],
+.frame-sheet__panel[data-side="bottom"] {
+  inset-inline: 0;
+  block-size: var(--frame-sheet-block-size);
+  max-block-size: 100dvh;
+}
+
+.frame-sheet__panel[data-side="top"] {
+  inset-block-start: 0;
+  border-block-start: 0;
+  animation: frame-sheet-enter-top 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.frame-sheet__panel[data-side="bottom"] {
+  inset-block-end: 0;
+  border-block-end: 0;
+  animation: frame-sheet-enter-bottom 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.frame-sheet__header,
+.frame-sheet__body,
+.frame-sheet__footer {
+  padding-inline: var(--frame-sheet-padding);
+}
+
+.frame-sheet__header {
+  display: grid;
+  flex: 0 0 auto;
+  gap: 0.375rem;
+  padding-block-start: var(--frame-sheet-padding);
+  padding-inline-end: calc(var(--frame-sheet-padding) + 2rem);
+}
+
+.frame-sheet__body {
+  display: grid;
+  min-height: 0;
+  flex: 1 1 auto;
+  gap: 1rem;
+}
+
+.frame-sheet__panel[data-scrollable] .frame-sheet__body {
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding-block-end: var(--frame-sheet-padding);
+}
+
+.frame-sheet__footer {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.625rem;
+  padding-block-end: var(--frame-sheet-padding);
+}
+
+.frame-sheet__title {
+  margin: 0;
+  color: var(--frame-sheet-color);
+  font-size: 1.125rem;
+  font-weight: 650;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+.frame-sheet__description {
+  margin: 0;
+  color: var(--frame-sheet-muted-color);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.frame-sheet__close {
+  position: absolute;
+  inset-block-start: 0.75rem;
+  inset-inline-end: 0.75rem;
+  display: inline-grid;
+  width: 2rem;
+  height: 2rem;
+  place-items: center;
+  border: 0;
+  border-radius: 999px;
+  background: var(--frame-sheet-close-bg);
+  color: var(--frame-sheet-close-color);
+  cursor: pointer;
+  font: inherit;
+  line-height: 1;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease,
+    transform 120ms ease;
+}
+
+.frame-sheet__close:hover {
+  background: var(--frame-sheet-close-hover-bg);
+  color: var(--frame-sheet-close-hover-color);
+}
+
+.frame-sheet__close:active {
+  transform: scale(0.96);
+}
+
+.frame-sheet__close:focus-visible,
+.frame-sheet__close-control:focus-visible {
+  outline: 2px solid var(--frame-ring, currentColor);
+  outline-offset: 2px;
+}
+
+@media (max-width: 640px) {
+  .frame-sheet__panel[data-side="right"],
+  .frame-sheet__panel[data-side="left"] {
+    inline-size: min(100vw, var(--frame-sheet-inline-size));
+  }
+
+  .frame-sheet__footer {
+    flex-direction: column-reverse;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .frame-sheet__panel {
+    animation: none;
+  }
+}
+
+@keyframes frame-sheet-enter-right {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes frame-sheet-enter-left {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes frame-sheet-enter-top {
+  from {
+    transform: translateY(-100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes frame-sheet-enter-bottom {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}

package/sidebar/src/styles/_vars.css

@@ -0,0 +1,24 @@
+:root {
+  --frame-sidebar-width: 16rem;
+  --frame-sidebar-width-icon: 3.5rem;
+  --frame-sidebar-width-mobile: 18rem;
+  --frame-sidebar-bg: var(--frame-background, #fff);
+  --frame-sidebar-color: var(--frame-foreground, #09090b);
+  --frame-sidebar-muted-color: var(--frame-muted-foreground, #71717a);
+  --frame-sidebar-border: var(--frame-border, #e5e7eb);
+  --frame-sidebar-accent: var(--frame-accent, #f4f4f5);
+  --frame-sidebar-accent-color: var(--frame-accent-foreground, #18181b);
+  --frame-sidebar-primary: var(--frame-primary, #18181b);
+  --frame-sidebar-primary-color: var(--frame-primary-foreground, #fff);
+  --frame-sidebar-ring: var(--frame-ring, #18181b);
+  --frame-sidebar-radius: var(--frame-radius-lg, 0.75rem);
+  --frame-sidebar-margin: 0.5rem;
+  --frame-sidebar-padding: 0.5rem;
+  --frame-sidebar-gap: 0.5rem;
+  --frame-sidebar-menu-button-height: 2rem;
+  --frame-sidebar-menu-button-radius: var(--frame-radius-md, 0.5rem);
+  --frame-sidebar-shadow: 0 20px 60px rgb(0 0 0 / 0.12);
+  --frame-sidebar-transition-duration: 200ms;
+  --frame-sidebar-z-index: 40;
+  --frame-sidebar-mobile-backdrop: rgb(0 0 0 / 0.42);
+}