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

package/slider/src/styles/slider.css

@@ -0,0 +1,147 @@
+@import './_vars.css';
+
+frame-slider {
+  position: relative;
+  display: grid;
+  align-items: center;
+  inline-size: var(--frame-slider-width);
+  block-size: var(--frame-slider-height);
+  touch-action: none;
+  user-select: none;
+}
+
+frame-slider[data-disabled] {
+  cursor: not-allowed;
+  opacity: var(--frame-slider-disabled-opacity);
+}
+
+frame-slider[data-orientation='vertical'] {
+  inline-size: var(--frame-slider-vertical-width);
+  block-size: var(--frame-slider-vertical-height);
+  justify-items: center;
+}
+
+.frame-slider__track {
+  position: absolute;
+  border-radius: var(--frame-slider-radius);
+  background: var(--frame-slider-track-bg);
+  pointer-events: none;
+}
+
+frame-slider[data-orientation='horizontal'] .frame-slider__track {
+  inset-inline: 0;
+  inset-block-start: 50%;
+  block-size: var(--frame-slider-track-size);
+  transform: translateY(-50%);
+}
+
+frame-slider[data-orientation='vertical'] .frame-slider__track {
+  inset-block: 0;
+  inset-inline-start: 50%;
+  inline-size: var(--frame-slider-track-size);
+  transform: translateX(-50%);
+}
+
+.frame-slider__range {
+  position: absolute;
+  border-radius: inherit;
+  background: var(--frame-slider-range-bg);
+}
+
+frame-slider[data-orientation='horizontal'] .frame-slider__range {
+  inset-block: 0;
+  inset-inline-start: var(--frame-slider-start-percent);
+  inline-size: calc(var(--frame-slider-end-percent) - var(--frame-slider-start-percent));
+}
+
+frame-slider[data-orientation='horizontal'][data-inverted='true'] .frame-slider__range {
+  inset-inline-start: auto;
+  inset-inline-end: var(--frame-slider-start-percent);
+}
+
+frame-slider[data-orientation='vertical'] .frame-slider__range {
+  inset-inline: 0;
+  inset-block-end: var(--frame-slider-start-percent);
+  block-size: calc(var(--frame-slider-end-percent) - var(--frame-slider-start-percent));
+}
+
+frame-slider[data-orientation='vertical'][data-inverted='true'] .frame-slider__range {
+  inset-block-start: var(--frame-slider-start-percent);
+  inset-block-end: auto;
+}
+
+.frame-slider__native {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  margin: 0;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.frame-slider__native:disabled {
+  cursor: not-allowed;
+}
+
+frame-slider[data-orientation='vertical'] .frame-slider__native {
+  writing-mode: vertical-lr;
+}
+
+.frame-slider__thumb {
+  position: absolute;
+  z-index: 1;
+  display: block;
+  inline-size: var(--frame-slider-thumb-size);
+  block-size: var(--frame-slider-thumb-size);
+  border: var(--frame-slider-thumb-border-width) solid var(--frame-slider-thumb-border);
+  border-radius: 999px;
+  background: var(--frame-slider-thumb-bg);
+  box-shadow: var(--frame-slider-thumb-shadow);
+  cursor: grab;
+}
+
+frame-slider[data-disabled] .frame-slider__thumb {
+  cursor: not-allowed;
+}
+
+.frame-slider__thumb[data-active] {
+  cursor: grabbing;
+}
+
+frame-slider[data-orientation='horizontal'] .frame-slider__thumb {
+  inset-inline-start: var(--frame-slider-thumb-percent);
+  inset-block-start: 50%;
+  transform: translate(-50%, -50%);
+}
+
+frame-slider[data-orientation='horizontal']:dir(rtl) .frame-slider__thumb {
+  transform: translate(50%, -50%);
+}
+
+frame-slider[data-orientation='vertical'] .frame-slider__thumb {
+  inset-inline-start: 50%;
+  inset-block-end: var(--frame-slider-thumb-percent);
+  transform: translate(-50%, 50%);
+}
+
+frame-slider[data-orientation='horizontal'][data-inverted='true'] .frame-slider__thumb {
+  inset-inline-start: auto;
+  inset-inline-end: var(--frame-slider-thumb-percent);
+}
+
+frame-slider[data-orientation='vertical'][data-inverted='true'] .frame-slider__thumb {
+  inset-block-start: var(--frame-slider-thumb-percent);
+  inset-block-end: auto;
+  transform: translate(-50%, -50%);
+}
+
+.frame-slider__native:focus-visible + .frame-slider__thumb,
+.frame-slider__thumb[data-active] {
+  box-shadow: var(--frame-slider-thumb-shadow), var(--frame-slider-thumb-focus-shadow);
+}
+
+frame-slider[data-invalid] {
+  --frame-slider-range-bg: var(--frame-destructive, #dc2626);
+  --frame-slider-thumb-border: var(--frame-destructive, #dc2626);
+}

package/spinner/src/styles/_vars.css

@@ -0,0 +1,9 @@
+:root {
+  --frame-spinner-size: 1rem;
+  --frame-spinner-stroke: 2px;
+  --frame-spinner-track-color: color-mix(in srgb, currentColor 24%, transparent);
+  --frame-spinner-indicator-color: currentColor;
+  --frame-spinner-radius: 999px;
+  --frame-spinner-duration: 700ms;
+}
+

package/spinner/src/styles/spinner.css

@@ -0,0 +1,62 @@
+@import './_vars.css';
+
+[frSpinner],
+frame-spinner,
+.frame-spinner {
+  box-sizing: border-box;
+  display: inline-flex;
+  inline-size: var(--frame-spinner-size);
+  block-size: var(--frame-spinner-size);
+  flex: 0 0 auto;
+  border: var(--frame-spinner-stroke) solid var(--frame-spinner-track-color);
+  border-block-start-color: var(--frame-spinner-indicator-color);
+  border-radius: var(--frame-spinner-radius);
+  color: currentColor;
+  animation: frame-spinner-spin var(--frame-spinner-duration) linear infinite;
+}
+
+[frSpinner][data-size='xs'],
+frame-spinner[data-size='xs'],
+.frame-spinner[data-size='xs'] {
+  --frame-spinner-size: 0.75rem;
+  --frame-spinner-stroke: 1.5px;
+}
+
+[frSpinner][data-size='sm'],
+frame-spinner[data-size='sm'],
+.frame-spinner[data-size='sm'] {
+  --frame-spinner-size: 0.875rem;
+}
+
+[frSpinner][data-size='md'],
+frame-spinner[data-size='md'],
+.frame-spinner[data-size='md'] {
+  --frame-spinner-size: 1rem;
+}
+
+[frSpinner][data-size='lg'],
+frame-spinner[data-size='lg'],
+.frame-spinner[data-size='lg'] {
+  --frame-spinner-size: 1.25rem;
+}
+
+[frSpinner][data-size='xl'],
+frame-spinner[data-size='xl'],
+.frame-spinner[data-size='xl'] {
+  --frame-spinner-size: 1.75rem;
+  --frame-spinner-stroke: 2.5px;
+}
+
+@keyframes frame-spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [frSpinner],
+  frame-spinner,
+  .frame-spinner {
+    animation-duration: 1.4s;
+  }
+}

package/src/styles/components.css

@@ -0,0 +1,47 @@
+@import '../../alert/src/styles/alert.css';
+@import '../../accordion/src/styles/accordion.css';
+@import '../../avatar/src/styles/avatar.css';
+@import '../../button/src/styles/button.css';
+@import '../../button-group/src/styles/button-group.css';
+@import '../../breadcrumb/src/styles/breadcrumb.css';
+@import '../../calendar/src/styles/calendar.css';
+@import '../../card/src/styles/card.css';
+@import '../../carousel/src/styles/carousel.css';
+@import '../../checkbox/src/styles/checkbox.css';
+@import '../../collapsible/src/styles/collapsible.css';
+@import '../../command/src/styles/command.css';
+@import '../../combobox/src/styles/combobox.css';
+@import '../../context-menu/src/styles/context-menu.css';
+@import '../../date-picker/src/styles/date-picker.css';
+@import '../../dropdown-menu/src/styles/dropdown-menu.css';
+@import '../../empty/src/styles/empty.css';
+@import '../../field/src/styles/field.css';
+@import '../../hover-card/src/styles/hover-card.css';
+@import '../../input/src/styles/input.css';
+@import '../../input/src/styles/input-group.css';
+@import '../../input-otp/src/styles/input-otp.css';
+@import '../../item/src/styles/item.css';
+@import '../../menubar/src/styles/menubar.css';
+@import '../../modal/src/styles/modal.css';
+@import '../../navigation-menu/src/styles/navigation-menu.css';
+@import '../../pagination/src/styles/pagination.css';
+@import '../../popover/src/styles/popover.css';
+@import '../../progress/src/styles/progress.css';
+@import '../../radio-group/src/styles/radio-group.css';
+@import '../../resizable/src/styles/resizable.css';
+@import '../../separator/src/styles/separator.css';
+@import '../../skeleton/src/styles/skeleton.css';
+@import '../../slider/src/styles/slider.css';
+@import '../../textarea/src/styles/textarea.css';
+@import '../../select/src/styles/select.css';
+@import '../../sheet/src/styles/sheet.css';
+@import '../../sidebar/src/styles/sidebar.css';
+@import '../../switch/src/styles/switch.css';
+@import '../../spinner/src/styles/spinner.css';
+@import '../../tabs/src/styles/tabs.css';
+@import '../../table/src/styles/table.css';
+@import '../../toggle/src/styles/toggle.css';
+@import '../../tooltip/src/styles/tooltip.css';
+@import '../../toast/src/styles/toast.css';
+@import '../../virtual-scroll/src/styles/virtual-scroll.css';
+@import '../../badge/src/styles/badge.css';

package/styles/components.css

@@ -0,0 +1,47 @@
+@import '../../alert/src/styles/alert.css';
+@import '../../accordion/src/styles/accordion.css';
+@import '../../avatar/src/styles/avatar.css';
+@import '../../button/src/styles/button.css';
+@import '../../button-group/src/styles/button-group.css';
+@import '../../breadcrumb/src/styles/breadcrumb.css';
+@import '../../calendar/src/styles/calendar.css';
+@import '../../card/src/styles/card.css';
+@import '../../carousel/src/styles/carousel.css';
+@import '../../checkbox/src/styles/checkbox.css';
+@import '../../collapsible/src/styles/collapsible.css';
+@import '../../command/src/styles/command.css';
+@import '../../combobox/src/styles/combobox.css';
+@import '../../context-menu/src/styles/context-menu.css';
+@import '../../date-picker/src/styles/date-picker.css';
+@import '../../dropdown-menu/src/styles/dropdown-menu.css';
+@import '../../empty/src/styles/empty.css';
+@import '../../field/src/styles/field.css';
+@import '../../hover-card/src/styles/hover-card.css';
+@import '../../input/src/styles/input.css';
+@import '../../input/src/styles/input-group.css';
+@import '../../input-otp/src/styles/input-otp.css';
+@import '../../item/src/styles/item.css';
+@import '../../menubar/src/styles/menubar.css';
+@import '../../modal/src/styles/modal.css';
+@import '../../navigation-menu/src/styles/navigation-menu.css';
+@import '../../pagination/src/styles/pagination.css';
+@import '../../popover/src/styles/popover.css';
+@import '../../progress/src/styles/progress.css';
+@import '../../radio-group/src/styles/radio-group.css';
+@import '../../resizable/src/styles/resizable.css';
+@import '../../separator/src/styles/separator.css';
+@import '../../skeleton/src/styles/skeleton.css';
+@import '../../slider/src/styles/slider.css';
+@import '../../textarea/src/styles/textarea.css';
+@import '../../select/src/styles/select.css';
+@import '../../sheet/src/styles/sheet.css';
+@import '../../sidebar/src/styles/sidebar.css';
+@import '../../switch/src/styles/switch.css';
+@import '../../spinner/src/styles/spinner.css';
+@import '../../tabs/src/styles/tabs.css';
+@import '../../table/src/styles/table.css';
+@import '../../toggle/src/styles/toggle.css';
+@import '../../tooltip/src/styles/tooltip.css';
+@import '../../toast/src/styles/toast.css';
+@import '../../virtual-scroll/src/styles/virtual-scroll.css';
+@import '../../badge/src/styles/badge.css';

package/styles.css

@@ -0,0 +1,49 @@
+@import '@frame-ui-ng/foundation/styles.css';
+
+@import './alert/src/styles/alert.css';
+@import './accordion/src/styles/accordion.css';
+@import './avatar/src/styles/avatar.css';
+@import './button/src/styles/button.css';
+@import './button-group/src/styles/button-group.css';
+@import './breadcrumb/src/styles/breadcrumb.css';
+@import './calendar/src/styles/calendar.css';
+@import './card/src/styles/card.css';
+@import './carousel/src/styles/carousel.css';
+@import './checkbox/src/styles/checkbox.css';
+@import './collapsible/src/styles/collapsible.css';
+@import './command/src/styles/command.css';
+@import './combobox/src/styles/combobox.css';
+@import './context-menu/src/styles/context-menu.css';
+@import './date-picker/src/styles/date-picker.css';
+@import './dropdown-menu/src/styles/dropdown-menu.css';
+@import './empty/src/styles/empty.css';
+@import './field/src/styles/field.css';
+@import './hover-card/src/styles/hover-card.css';
+@import './input/src/styles/input.css';
+@import './input/src/styles/input-group.css';
+@import './input-otp/src/styles/input-otp.css';
+@import './item/src/styles/item.css';
+@import './menubar/src/styles/menubar.css';
+@import './modal/src/styles/modal.css';
+@import './navigation-menu/src/styles/navigation-menu.css';
+@import './pagination/src/styles/pagination.css';
+@import './popover/src/styles/popover.css';
+@import './progress/src/styles/progress.css';
+@import './radio-group/src/styles/radio-group.css';
+@import './resizable/src/styles/resizable.css';
+@import './separator/src/styles/separator.css';
+@import './skeleton/src/styles/skeleton.css';
+@import './slider/src/styles/slider.css';
+@import './textarea/src/styles/textarea.css';
+@import './select/src/styles/select.css';
+@import './sheet/src/styles/sheet.css';
+@import './sidebar/src/styles/sidebar.css';
+@import './switch/src/styles/switch.css';
+@import './spinner/src/styles/spinner.css';
+@import './tabs/src/styles/tabs.css';
+@import './table/src/styles/table.css';
+@import './toggle/src/styles/toggle.css';
+@import './tooltip/src/styles/tooltip.css';
+@import './toast/src/styles/toast.css';
+@import './virtual-scroll/src/styles/virtual-scroll.css';
+@import './badge/src/styles/badge.css';

package/switch/src/styles/_vars.css

@@ -0,0 +1,34 @@
+:root {
+  --frame-switch-field-gap: 0.75rem;
+  --frame-switch-field-color: var(--frame-foreground);
+  --frame-switch-field-disabled-color: var(--frame-muted-foreground);
+  --frame-switch-content-gap: 0.25rem;
+  --frame-switch-label-font-size: 0.875rem;
+  --frame-switch-label-font-weight: 600;
+  --frame-switch-description-color: var(--frame-muted-foreground);
+  --frame-switch-description-font-size: 0.8125rem;
+  --frame-switch-error-color: var(--frame-destructive);
+  --frame-switch-error-font-size: 0.8125rem;
+  --frame-switch-width: 2.25rem;
+  --frame-switch-height: 1.25rem;
+  --frame-switch-thumb-size: 1rem;
+  --frame-switch-padding: 0.125rem;
+  --frame-switch-sm-width: 1.75rem;
+  --frame-switch-sm-height: 1rem;
+  --frame-switch-sm-thumb-size: 0.75rem;
+  --frame-switch-radius: 999px;
+  --frame-switch-bg: var(--frame-input);
+  --frame-switch-hover-bg: color-mix(in srgb, var(--frame-input) 82%, var(--frame-foreground));
+  --frame-switch-checked-bg: var(--frame-primary);
+  --frame-switch-checked-hover-bg: color-mix(in srgb, var(--frame-primary) 88%, var(--frame-foreground));
+  --frame-switch-thumb-bg: var(--frame-background);
+  --frame-switch-thumb-shadow: 0 1px 2px rgb(0 0 0 / 0.22);
+  --frame-switch-border-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frame-border) 70%, transparent);
+  --frame-switch-checked-border-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frame-primary) 80%, var(--frame-border));
+  --frame-switch-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 28%, transparent);
+  --frame-switch-invalid-border: color-mix(in srgb, var(--frame-destructive) 65%, var(--frame-border));
+  --frame-switch-invalid-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frame-destructive) 40%, transparent), 0 0 0 3px color-mix(in srgb, var(--frame-destructive) 14%, transparent);
+  --frame-switch-disabled-opacity: 0.5;
+  --frame-switch-transition-duration: 160ms;
+  --frame-switch-transition-easing: cubic-bezier(0.16, 1, 0.3, 1);
+}

package/switch/src/styles/switch.css

@@ -0,0 +1,131 @@
+@import './_vars.css';
+
+[frSwitchField],
+frame-switch-field {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--frame-switch-field-gap);
+  width: 100%;
+  color: var(--frame-switch-field-color);
+}
+
+[frSwitchField]:has([frSwitch]:disabled),
+frame-switch-field:has([frSwitch]:disabled) {
+  color: var(--frame-switch-field-disabled-color);
+}
+
+[frSwitchContent],
+frame-switch-content {
+  display: grid;
+  gap: var(--frame-switch-content-gap);
+  min-width: 0;
+}
+
+[frSwitchLabel],
+frame-switch-label {
+  font-size: var(--frame-switch-label-font-size);
+  font-weight: var(--frame-switch-label-font-weight);
+  line-height: 1.3;
+}
+
+[frSwitchDescription],
+frame-switch-description {
+  color: var(--frame-switch-description-color);
+  font-size: var(--frame-switch-description-font-size);
+  line-height: 1.45;
+  margin: 0;
+}
+
+[frSwitchError],
+frame-switch-error {
+  color: var(--frame-switch-error-color);
+  font-size: var(--frame-switch-error-font-size);
+  line-height: 1.45;
+  margin: 0;
+}
+
+[frSwitch] {
+  appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 auto;
+  inline-size: var(--frame-switch-width);
+  block-size: var(--frame-switch-height);
+  margin: 0;
+  border: 1px solid transparent;
+  border-radius: var(--frame-switch-radius);
+  background: var(--frame-switch-bg);
+  box-shadow: var(--frame-switch-border-shadow);
+  cursor: pointer;
+  outline: none;
+  vertical-align: middle;
+  transition:
+    background-color var(--frame-switch-transition-duration) ease,
+    border-color var(--frame-switch-transition-duration) ease,
+    box-shadow var(--frame-switch-transition-duration) ease,
+    opacity var(--frame-switch-transition-duration) ease;
+}
+
+[frSwitch][data-size='sm'] {
+  --frame-switch-width: var(--frame-switch-sm-width);
+  --frame-switch-height: var(--frame-switch-sm-height);
+  --frame-switch-thumb-size: var(--frame-switch-sm-thumb-size);
+}
+
+[frSwitch]::before {
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: var(--frame-switch-padding);
+  inline-size: var(--frame-switch-thumb-size);
+  block-size: var(--frame-switch-thumb-size);
+  border-radius: var(--frame-switch-radius);
+  background: var(--frame-switch-thumb-bg);
+  box-shadow: var(--frame-switch-thumb-shadow);
+  transform: translateY(-50%);
+  transition:
+    inset-inline-start var(--frame-switch-transition-duration) var(--frame-switch-transition-easing),
+    transform var(--frame-switch-transition-duration) var(--frame-switch-transition-easing);
+}
+
+[frSwitch]:checked {
+  background: var(--frame-switch-checked-bg);
+  box-shadow: var(--frame-switch-checked-border-shadow);
+}
+
+[frSwitch]:checked::before {
+  inset-inline-start: calc(100% - var(--frame-switch-thumb-size) - var(--frame-switch-padding));
+}
+
+[frSwitch]:where(:not(:disabled)):hover {
+  background: var(--frame-switch-hover-bg);
+}
+
+[frSwitch]:where(:not(:disabled)):checked:hover {
+  background: var(--frame-switch-checked-hover-bg);
+}
+
+[frSwitch]:focus-visible {
+  box-shadow:
+    var(--frame-switch-border-shadow),
+    var(--frame-switch-focus-shadow);
+}
+
+[frSwitch]:checked:focus-visible {
+  box-shadow:
+    var(--frame-switch-checked-border-shadow),
+    var(--frame-switch-focus-shadow);
+}
+
+[frSwitch]:disabled {
+  cursor: not-allowed;
+  opacity: var(--frame-switch-disabled-opacity);
+}
+
+[frSwitch][aria-invalid='true'],
+[frSwitch].ng-invalid.ng-touched,
+[frSwitch].ng-invalid.ng-dirty {
+  border-color: var(--frame-switch-invalid-border);
+  box-shadow: var(--frame-switch-invalid-shadow);
+}

package/table/src/styles/_vars.css

@@ -0,0 +1,25 @@
+:root {
+  --frame-table-bg: var(--frame-surface);
+  --frame-table-color: var(--frame-foreground);
+  --frame-table-border: var(--frame-border);
+  --frame-table-radius: var(--frame-radius-lg);
+  --frame-table-shadow: none;
+  --frame-table-caption-color: var(--frame-muted-foreground);
+  --frame-table-caption-font-size: 0.875rem;
+  --frame-table-header-bg: color-mix(in srgb, var(--frame-muted) 70%, var(--frame-table-bg));
+  --frame-table-header-color: var(--frame-muted-foreground);
+  --frame-table-header-font-size: 0.8125rem;
+  --frame-table-header-font-weight: 650;
+  --frame-table-row-border: color-mix(in srgb, var(--frame-table-border) 78%, var(--frame-table-bg));
+  --frame-table-row-hover-bg: color-mix(in srgb, var(--frame-accent) 72%, var(--frame-table-bg));
+  --frame-table-row-selected-bg: color-mix(in srgb, var(--frame-primary) 10%, var(--frame-table-bg));
+  --frame-table-row-striped-bg: color-mix(in srgb, var(--frame-muted) 36%, var(--frame-table-bg));
+  --frame-table-cell-padding-block: 0.75rem;
+  --frame-table-cell-padding-inline: 1rem;
+  --frame-table-cell-font-size: 0.875rem;
+  --frame-table-cell-line-height: 1.45;
+  --frame-table-footer-bg: color-mix(in srgb, var(--frame-muted) 50%, var(--frame-table-bg));
+  --frame-table-footer-font-weight: 650;
+  --frame-table-transition-duration: 150ms;
+  --frame-table-sticky-shadow: 0 0 0 1px var(--frame-table-border);
+}