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

package/date-picker/src/styles/date-picker.css

@@ -1,177 +1,203 @@
-@import './_vars.css';
-
-.frame-date-picker {
-  display: inline-block;
-  max-width: 100%;
-}
-
-.frame-date-picker__anchor {
-  display: inline-block;
-  max-width: 100%;
-}
-
-.frame-date-picker__trigger,
-.frame-date-picker__input-wrap {
-  box-sizing: border-box;
-  display: inline-flex;
-  min-block-size: var(--frame-date-picker-trigger-height);
-  inline-size: var(--frame-date-picker-trigger-width);
-  max-inline-size: 100%;
-  align-items: center;
-  gap: var(--frame-date-picker-trigger-gap);
-  border: 1px solid var(--frame-date-picker-trigger-border);
-  border-radius: var(--frame-date-picker-trigger-radius);
-  background: var(--frame-date-picker-trigger-bg);
-  color: var(--frame-date-picker-trigger-color);
-  padding: var(--frame-date-picker-trigger-padding);
-  transition:
-    border-color 150ms ease,
-    box-shadow 150ms ease,
-    opacity 150ms ease;
-}
-
-.frame-date-picker__trigger {
-  cursor: pointer;
-  font: inherit;
-  text-align: start;
-}
-
-.frame-date-picker__input-wrap {
-  cursor: text;
-}
-
-.frame-date-picker__input {
-  min-width: 0;
-  flex: 1 1 auto;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  outline: none;
-  padding: 0;
-}
-
-.frame-date-picker__input::placeholder,
-.frame-date-picker__trigger-label[data-placeholder] {
-  color: var(--frame-date-picker-trigger-placeholder-color);
-}
-
-.frame-date-picker__icon {
-  display: inline-flex;
-  flex: 0 0 auto;
-  color: var(--frame-date-picker-trigger-placeholder-color);
-  line-height: 1;
-}
-
-.frame-date-picker__trigger-label {
-  min-width: 0;
-  flex: 1 1 auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.frame-date-picker__trigger:hover:not(:disabled),
-.frame-date-picker__input-wrap:focus-within,
-.frame-date-picker__input-wrap:hover {
-  border-color: var(--frame-date-picker-trigger-hover-border);
-}
-
-.frame-date-picker__trigger:focus-visible,
-.frame-date-picker__input-wrap:focus-within {
-  outline: none;
-  box-shadow: var(--frame-date-picker-trigger-focus-shadow);
-}
-
-.frame-date-picker[data-invalid] .frame-date-picker__trigger,
-.frame-date-picker[data-invalid] .frame-date-picker__input-wrap {
-  border-color: var(--frame-date-picker-trigger-invalid-border);
-}
-
-.frame-date-picker[data-disabled] {
-  opacity: var(--frame-date-picker-trigger-disabled-opacity);
-}
-
-.frame-date-picker[data-disabled] .frame-date-picker__trigger,
-.frame-date-picker[data-disabled] .frame-date-picker__input-wrap {
-  cursor: not-allowed;
-}
-
-.frame-date-picker__content {
-  box-sizing: border-box;
-  overflow: hidden;
-  border: 1px solid var(--frame-date-picker-content-border);
-  border-radius: var(--frame-date-picker-content-radius);
-  background: var(--frame-date-picker-content-bg);
-  color: var(--frame-date-picker-content-color);
-  box-shadow: var(--frame-date-picker-content-shadow);
-  padding: var(--frame-date-picker-content-padding);
-  animation: frame-date-picker-enter var(--frame-date-picker-motion-duration) var(--frame-date-picker-motion-easing);
-}
-
-.frame-date-picker__content .frame-calendar {
-  border: 0;
-  box-shadow: none;
-}
-
-.frame-date-picker__presets {
-  display: grid;
-  gap: 0.125rem;
-  border-block-end: 1px solid var(--frame-date-picker-presets-border);
-  padding: 0.25rem;
-}
-
-.frame-date-picker__preset {
-  min-block-size: var(--frame-date-picker-preset-height);
-  border: 0;
-  border-radius: var(--frame-date-picker-preset-radius);
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  padding-inline: 0.5rem;
-  text-align: start;
-}
-
-.frame-date-picker__preset:hover,
-.frame-date-picker__preset:focus-visible {
-  background: var(--frame-date-picker-preset-hover-bg);
-  outline: none;
-}
-
-.frame-date-picker__time {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  border-block-start: 1px solid var(--frame-date-picker-time-border);
-  padding: var(--frame-date-picker-time-padding);
-}
-
-.frame-date-picker__time-label {
-  color: var(--frame-muted-foreground);
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-.frame-date-picker__time-input {
-  min-block-size: 2rem;
-  border: 1px solid var(--frame-border);
-  border-radius: var(--frame-radius-md);
-  background: var(--frame-background);
-  color: var(--frame-foreground);
-  font: inherit;
-  padding-inline: 0.5rem;
-}
-
-@keyframes frame-date-picker-enter {
-  from {
-    opacity: 0;
-    transform: translateY(-0.25rem) scale(0.98);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
+@import './_vars.css';
+
+.frame-date-picker {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.frame-date-picker__anchor {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.frame-date-picker__trigger,
+.frame-date-picker__input-wrap {
+  box-sizing: border-box;
+  display: inline-flex;
+  min-block-size: var(--frame-date-picker-trigger-height);
+  inline-size: var(--frame-date-picker-trigger-width);
+  max-inline-size: 100%;
+  align-items: center;
+  gap: var(--frame-date-picker-trigger-gap);
+  border: 1px solid var(--frame-date-picker-trigger-border);
+  border-radius: var(--frame-date-picker-trigger-radius);
+  background: var(--frame-date-picker-trigger-bg);
+  color: var(--frame-date-picker-trigger-color);
+  padding: var(--frame-date-picker-trigger-padding);
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease,
+    opacity 150ms ease,
+    transform 150ms ease;
+}
+
+.frame-date-picker__trigger {
+  cursor: pointer;
+  font: inherit;
+  text-align: start;
+}
+
+.frame-date-picker__input-wrap {
+  cursor: text;
+}
+
+.frame-date-picker__input {
+  min-width: 0;
+  flex: 1 1 auto;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+  padding: 0;
+}
+
+.frame-date-picker__input::placeholder,
+.frame-date-picker__trigger-label[data-placeholder] {
+  color: var(--frame-date-picker-trigger-placeholder-color);
+}
+
+.frame-date-picker__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: var(--frame-date-picker-trigger-placeholder-color);
+  line-height: 1;
+}
+
+.frame-date-picker__trigger-label {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.frame-date-picker__trigger:hover:not(:disabled),
+.frame-date-picker__input-wrap:focus-within,
+.frame-date-picker__input-wrap:hover {
+  border-color: var(--frame-date-picker-trigger-hover-border);
+  transform: translate(-1px, -1px);
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--frame-frame-line-muted, var(--frame-border)) 82%, transparent);
+}
+
+.frame-date-picker__trigger:focus-visible,
+.frame-date-picker__input-wrap:focus-within {
+  outline: none;
+  border-color: var(--frame-frame-accent, var(--frame-ring));
+  box-shadow: var(--frame-date-picker-trigger-focus-shadow);
+}
+
+.frame-date-picker[data-open] .frame-date-picker__trigger,
+.frame-date-picker[data-open] .frame-date-picker__input-wrap {
+  border-color: var(--frame-frame-accent, var(--frame-date-picker-trigger-hover-border));
+  background: color-mix(in srgb, var(--frame-date-picker-trigger-bg) 68%, var(--frame-muted));
+  transform: translate(-1px, -1px);
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--frame-frame-line-muted, var(--frame-border)) 82%, transparent);
+}
+
+.frame-date-picker[data-invalid] .frame-date-picker__trigger,
+.frame-date-picker[data-invalid] .frame-date-picker__input-wrap {
+  border-color: var(--frame-date-picker-trigger-invalid-border);
+}
+
+.frame-date-picker[data-disabled] {
+  opacity: var(--frame-date-picker-trigger-disabled-opacity);
+}
+
+.frame-date-picker[data-disabled] .frame-date-picker__trigger,
+.frame-date-picker[data-disabled] .frame-date-picker__input-wrap {
+  cursor: not-allowed;
+}
+
+.frame-date-picker__content {
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 1px solid var(--frame-date-picker-content-border);
+  border-radius: var(--frame-date-picker-content-radius);
+  background: var(--frame-date-picker-content-bg);
+  color: var(--frame-date-picker-content-color);
+  box-shadow: var(--frame-date-picker-content-shadow);
+  padding: var(--frame-date-picker-content-padding);
+  animation: frame-date-picker-enter var(--frame-date-picker-motion-duration) var(--frame-date-picker-motion-easing);
+}
+
+.frame-date-picker__content .frame-calendar {
+  border: 0;
+  box-shadow: none;
+}
+
+.frame-date-picker__presets {
+  display: grid;
+  gap: 0.125rem;
+  border-block-end: 1px solid var(--frame-date-picker-presets-border);
+  padding: 0.25rem;
+}
+
+.frame-date-picker__preset {
+  min-block-size: var(--frame-date-picker-preset-height);
+  border: 1px solid transparent;
+  border-radius: var(--frame-date-picker-preset-radius);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding-inline: 0.5rem;
+  text-align: start;
+  transition:
+    background-color 140ms ease,
+    border-color 140ms ease,
+    transform 140ms ease,
+    box-shadow 140ms ease;
+}
+
+.frame-date-picker__preset:hover,
+.frame-date-picker__preset:focus-visible {
+  background: var(--frame-date-picker-preset-hover-bg);
+  border-color: var(--frame-frame-line-muted, var(--frame-border));
+  outline: none;
+  transform: translateX(0.25rem);
+  box-shadow: none;
+}
+
+.frame-date-picker__time {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  border-block-start: 1px solid var(--frame-date-picker-time-border);
+  padding: var(--frame-date-picker-time-padding);
+}
+
+.frame-date-picker__time-label {
+  color: var(--frame-muted-foreground);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.frame-date-picker__time-input {
+  min-block-size: 2rem;
+  border: 1px solid var(--frame-border);
+  border-radius: var(--frame-date-picker-time-input-radius);
+  background: var(--frame-background);
+  color: var(--frame-foreground);
+  font: inherit;
+  padding-inline: 0.5rem;
+}
+
+.frame-date-picker__time-input:focus-visible {
+  border-color: var(--frame-frame-accent, var(--frame-ring));
+  outline: none;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frame-frame-accent, var(--frame-ring)) 24%, transparent);
+}
+
+@keyframes frame-date-picker-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-0.25rem) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

package/dropdown-menu/src/styles/_vars.css

@@ -1,34 +1,34 @@
-:root {
-  --frame-dropdown-menu-panel-min-width: 13rem;
-  --frame-dropdown-menu-panel-radius: var(--frame-radius-md);
-  --frame-dropdown-menu-panel-bg: var(--frame-surface);
-  --frame-dropdown-menu-panel-color: var(--frame-surface-foreground);
-  --frame-dropdown-menu-panel-border: var(--frame-border);
-  --frame-dropdown-menu-panel-shadow: var(--frame-shadow-md);
-  --frame-dropdown-menu-panel-padding: 0.25rem;
-  --frame-dropdown-menu-label-color: var(--frame-muted-foreground);
-  --frame-dropdown-menu-label-font-size: 0.75rem;
-  --frame-dropdown-menu-label-font-weight: 600;
-  --frame-dropdown-menu-separator-margin: 0.25rem -0.25rem;
-  --frame-dropdown-menu-separator-bg: var(--frame-border);
-  --frame-dropdown-menu-item-gap: 0.5rem;
-  --frame-dropdown-menu-item-height: 2rem;
-  --frame-dropdown-menu-item-radius: calc(var(--frame-radius-md) - 0.125rem);
-  --frame-dropdown-menu-item-padding: 0.375rem 0.5rem;
-  --frame-dropdown-menu-item-font-size: 0.875rem;
-  --frame-dropdown-menu-item-hover-bg: var(--frame-accent);
-  --frame-dropdown-menu-item-hover-color: var(--frame-accent-foreground);
-  --frame-dropdown-menu-item-disabled-opacity: 0.5;
-  --frame-dropdown-menu-item-destructive-color: var(--frame-destructive);
-  --frame-dropdown-menu-item-destructive-hover-bg: color-mix(in srgb, var(--frame-destructive) 12%, var(--frame-surface));
-  --frame-dropdown-menu-item-destructive-hover-color: var(--frame-destructive);
-  --frame-dropdown-menu-item-inset-padding: 2rem;
-  --frame-dropdown-menu-shortcut-gap: 0.75rem;
-  --frame-dropdown-menu-shortcut-color: var(--frame-muted-foreground);
-  --frame-dropdown-menu-shortcut-font-size: 0.75rem;
-  --frame-dropdown-menu-indicator-size: 1rem;
-  --frame-dropdown-menu-motion-duration: 140ms;
-  --frame-dropdown-menu-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
-  --frame-dropdown-menu-motion-distance: 0.2rem;
-  --frame-dropdown-menu-motion-scale: 0.98;
-}
+:root {
+  --frame-dropdown-menu-panel-min-width: 13rem;
+  --frame-dropdown-menu-panel-radius: var(--frame-radius-md);
+  --frame-dropdown-menu-panel-bg: var(--frame-surface);
+  --frame-dropdown-menu-panel-color: var(--frame-surface-foreground);
+  --frame-dropdown-menu-panel-border: var(--frame-border);
+  --frame-dropdown-menu-panel-shadow: var(--frame-shadow-md);
+  --frame-dropdown-menu-panel-padding: 0.25rem;
+  --frame-dropdown-menu-label-color: var(--frame-muted-foreground);
+  --frame-dropdown-menu-label-font-size: 0.75rem;
+  --frame-dropdown-menu-label-font-weight: 600;
+  --frame-dropdown-menu-separator-margin: 0.25rem -0.25rem;
+  --frame-dropdown-menu-separator-bg: var(--frame-border);
+  --frame-dropdown-menu-item-gap: 0.5rem;
+  --frame-dropdown-menu-item-height: 2rem;
+  --frame-dropdown-menu-item-radius: calc(var(--frame-radius-md) - 0.125rem);
+  --frame-dropdown-menu-item-padding: 0.375rem 0.5rem;
+  --frame-dropdown-menu-item-font-size: 0.875rem;
+  --frame-dropdown-menu-item-hover-bg: var(--frame-accent);
+  --frame-dropdown-menu-item-hover-color: var(--frame-accent-foreground);
+  --frame-dropdown-menu-item-disabled-opacity: 0.5;
+  --frame-dropdown-menu-item-destructive-color: var(--frame-destructive);
+  --frame-dropdown-menu-item-destructive-hover-bg: color-mix(in srgb, var(--frame-destructive) 12%, var(--frame-surface));
+  --frame-dropdown-menu-item-destructive-hover-color: var(--frame-destructive);
+  --frame-dropdown-menu-item-inset-padding: 2rem;
+  --frame-dropdown-menu-shortcut-gap: 0.75rem;
+  --frame-dropdown-menu-shortcut-color: var(--frame-muted-foreground);
+  --frame-dropdown-menu-shortcut-font-size: 0.75rem;
+  --frame-dropdown-menu-indicator-size: 1rem;
+  --frame-dropdown-menu-motion-duration: 140ms;
+  --frame-dropdown-menu-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --frame-dropdown-menu-motion-distance: 0.2rem;
+  --frame-dropdown-menu-motion-scale: 0.98;
+}

package/dropdown-menu/src/styles/dropdown-menu-item.css

@@ -1,87 +1,87 @@
-.frame-dropdown-menu__item,
-.frame-dropdown-menu__label {
-  display: flex;
-  align-items: center;
-  column-gap: var(--frame-dropdown-menu-item-gap);
-  min-height: var(--frame-dropdown-menu-item-height);
-  border-radius: var(--frame-dropdown-menu-item-radius);
-  padding: var(--frame-dropdown-menu-item-padding);
-  font-size: var(--frame-dropdown-menu-item-font-size);
-  line-height: 1.25;
-  box-sizing: border-box;
-}
-
-.frame-dropdown-menu__label {
-  font-size: var(--frame-dropdown-menu-label-font-size);
-}
-
-.frame-dropdown-menu__item {
-  width: 100%;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: default;
-  text-align: left;
-  text-decoration: none;
-}
-
-.frame-dropdown-menu__item:hover,
-.frame-dropdown-menu__item:focus-visible,
-.frame-dropdown-menu__sub-trigger[data-state='open'] {
-  background: var(--frame-dropdown-menu-item-hover-bg);
-  color: var(--frame-dropdown-menu-item-hover-color);
-  outline: none;
-}
-
-.frame-dropdown-menu__item[disabled],
-.frame-dropdown-menu__item[aria-disabled='true'] {
-  opacity: var(--frame-dropdown-menu-item-disabled-opacity);
-  pointer-events: none;
-}
-
-.frame-dropdown-menu__item[data-variant='destructive'] {
-  color: var(--frame-dropdown-menu-item-destructive-color);
-}
-
-.frame-dropdown-menu__item[data-variant='destructive']:hover,
-.frame-dropdown-menu__item[data-variant='destructive']:focus-visible,
-.frame-dropdown-menu__item[data-variant='destructive'].frame-dropdown-menu__sub-trigger[data-state='open'] {
-  background: var(--frame-dropdown-menu-item-destructive-hover-bg);
-  color: var(--frame-dropdown-menu-item-destructive-hover-color);
-}
-
-.frame-dropdown-menu__item[data-inset],
-.frame-dropdown-menu__label[data-inset] {
-  padding-left: var(--frame-dropdown-menu-item-inset-padding);
-}
-
-.frame-dropdown-menu__shortcut {
-  margin-left: auto;
-  padding-left: var(--frame-dropdown-menu-shortcut-gap);
-  color: var(--frame-dropdown-menu-shortcut-color);
-  font-size: var(--frame-dropdown-menu-shortcut-font-size);
-  line-height: 1.25;
-  letter-spacing: 0.04em;
-  white-space: nowrap;
-}
-
-.frame-dropdown-menu__indicator {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--frame-dropdown-menu-indicator-size);
-  height: var(--frame-dropdown-menu-indicator-size);
-  color: inherit;
-}
-
-.frame-dropdown-menu__checkbox-item:not([data-checked]) .frame-dropdown-menu__indicator,
-.frame-dropdown-menu__radio-item:not([data-checked]) .frame-dropdown-menu__indicator {
-  opacity: 0;
-}
-
-.frame-dropdown-menu__sub-trigger::after {
-  content: '›';
-  margin-left: auto;
-  padding-left: var(--frame-dropdown-menu-shortcut-gap);
-  color: var(--frame-dropdown-menu-shortcut-color);
-}
+.frame-dropdown-menu__item,
+.frame-dropdown-menu__label {
+  display: flex;
+  align-items: center;
+  column-gap: var(--frame-dropdown-menu-item-gap);
+  min-height: var(--frame-dropdown-menu-item-height);
+  border-radius: var(--frame-dropdown-menu-item-radius);
+  padding: var(--frame-dropdown-menu-item-padding);
+  font-size: var(--frame-dropdown-menu-item-font-size);
+  line-height: 1.25;
+  box-sizing: border-box;
+}
+
+.frame-dropdown-menu__label {
+  font-size: var(--frame-dropdown-menu-label-font-size);
+}
+
+.frame-dropdown-menu__item {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  text-decoration: none;
+}
+
+.frame-dropdown-menu__item:hover,
+.frame-dropdown-menu__item:focus-visible,
+.frame-dropdown-menu__sub-trigger[data-state='open'] {
+  background: var(--frame-dropdown-menu-item-hover-bg);
+  color: var(--frame-dropdown-menu-item-hover-color);
+  outline: none;
+}
+
+.frame-dropdown-menu__item[disabled],
+.frame-dropdown-menu__item[aria-disabled='true'] {
+  opacity: var(--frame-dropdown-menu-item-disabled-opacity);
+  pointer-events: none;
+}
+
+.frame-dropdown-menu__item[data-variant='destructive'] {
+  color: var(--frame-dropdown-menu-item-destructive-color);
+}
+
+.frame-dropdown-menu__item[data-variant='destructive']:hover,
+.frame-dropdown-menu__item[data-variant='destructive']:focus-visible,
+.frame-dropdown-menu__item[data-variant='destructive'].frame-dropdown-menu__sub-trigger[data-state='open'] {
+  background: var(--frame-dropdown-menu-item-destructive-hover-bg);
+  color: var(--frame-dropdown-menu-item-destructive-hover-color);
+}
+
+.frame-dropdown-menu__item[data-inset],
+.frame-dropdown-menu__label[data-inset] {
+  padding-left: var(--frame-dropdown-menu-item-inset-padding);
+}
+
+.frame-dropdown-menu__shortcut {
+  margin-left: auto;
+  padding-left: var(--frame-dropdown-menu-shortcut-gap);
+  color: var(--frame-dropdown-menu-shortcut-color);
+  font-size: var(--frame-dropdown-menu-shortcut-font-size);
+  line-height: 1.25;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.frame-dropdown-menu__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--frame-dropdown-menu-indicator-size);
+  height: var(--frame-dropdown-menu-indicator-size);
+  color: inherit;
+}
+
+.frame-dropdown-menu__checkbox-item:not([data-checked]) .frame-dropdown-menu__indicator,
+.frame-dropdown-menu__radio-item:not([data-checked]) .frame-dropdown-menu__indicator {
+  opacity: 0;
+}
+
+.frame-dropdown-menu__sub-trigger::after {
+  content: '›';
+  margin-left: auto;
+  padding-left: var(--frame-dropdown-menu-shortcut-gap);
+  color: var(--frame-dropdown-menu-shortcut-color);
+}