@snacky/ui 0.5.9 → 0.6.0

package/dist/index.css

@@ -1550,6 +1550,204 @@
   background: var(--bg-action-primary-hover);
 }
 
+/* src/components/Stepper/Stepper.css */
+.snacky-stepper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-32);
+}
+.snacky-stepper__step {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-layout-block);
+  min-height: 48px;
+}
+.snacky-stepper__step::before {
+  content: "";
+  position: absolute;
+  left: 12px;
+  top: 24px;
+  bottom: calc(-1 * var(--spacing-32));
+  border-left: 1px dashed var(--border-main);
+}
+.snacky-stepper__step--last::before {
+  content: none;
+}
+.snacky-stepper__dot {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+.snacky-stepper__dot::before {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-full);
+}
+.snacky-stepper__dot--done::before {
+  background: var(--icon-brand);
+}
+.snacky-stepper__dot--pending::before {
+  background: var(--bg-action-disabled);
+}
+.snacky-stepper__dot--cancelled::before {
+  background: var(--bg-surface-accent);
+}
+.snacky-stepper__dot--cancelled svg {
+  position: relative;
+  z-index: 1;
+  color: var(--icon-on-accent);
+}
+.snacky-stepper__body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.snacky-stepper__label {
+  font-family: var(--font-small-bold-family);
+  font-size: var(--font-small-bold-size);
+  font-weight: var(--font-small-bold-weight);
+  line-height: var(--font-small-bold-line-height);
+  letter-spacing: var(--font-small-bold-letter-spacing);
+}
+.snacky-stepper__label--done {
+  color: var(--text-primary);
+}
+.snacky-stepper__label--pending {
+  color: var(--text-secondary);
+}
+.snacky-stepper__label--cancelled {
+  color: var(--text-error);
+}
+.snacky-stepper__time {
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  font-weight: var(--font-small-regular-weight);
+  line-height: var(--font-small-regular-line-height);
+  letter-spacing: var(--font-small-regular-letter-spacing);
+  color: var(--text-secondary);
+}
+
+/* src/components/Calendar/Calendar.css */
+.snacky-calendar {
+  width: 100%;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-24);
+  padding: var(--spacing-24);
+  background: var(--bg-surface);
+  box-sizing: border-box;
+}
+.snacky-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-8);
+}
+.snacky-calendar__nav {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--icon-primary);
+  cursor: pointer;
+}
+.snacky-calendar__nav--next {
+  transform: scaleX(-1);
+}
+.snacky-calendar__label {
+  flex: 1;
+  text-align: center;
+  font-family: var(--font-h3-bold-family);
+  font-size: var(--font-h3-bold-size);
+  font-weight: var(--font-h3-bold-weight);
+  line-height: var(--font-h3-bold-line-height);
+  letter-spacing: var(--font-h3-bold-letter-spacing);
+  color: var(--text-primary);
+}
+.snacky-calendar__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  justify-items: center;
+  align-items: center;
+  row-gap: 19px;
+}
+.snacky-calendar__weekday {
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--font-small-regular-family);
+  font-size: var(--font-small-regular-size);
+  font-weight: var(--font-small-regular-weight);
+  line-height: var(--font-small-regular-line-height);
+  letter-spacing: var(--font-small-regular-letter-spacing);
+  color: var(--text-primary);
+}
+.snacky-calendar__day {
+  position: relative;
+  width: 100%;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  font-family: var(--font-h3-regular-family, var(--font-h3-bold-family));
+  font-size: 16px;
+  line-height: 36px;
+  color: var(--text-primary);
+}
+.snacky-calendar__day--outside {
+  color: var(--text-disabled);
+  cursor: default;
+}
+.snacky-calendar__day--in-range {
+  background: var(--bg-surface-highlight);
+}
+.snacky-calendar__day-number {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-full);
+}
+.snacky-calendar__day--selected .snacky-calendar__day-number {
+  background: var(--bg-action-primary);
+  font-weight: 700;
+}
+.snacky-calendar__day--selected {
+  background: var(--bg-surface-highlight);
+}
+.snacky-calendar__marker {
+  position: absolute;
+  bottom: 2px;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background: var(--bg-action-primary);
+}
+
 /* src/components/Avatar/Avatar.css */
 .snacky-avatar {
   display: block;