@jongh/ui 1.6.5 → 2.20260905.1

package/dist/recipes/calendar-recipe.css

@@ -0,0 +1,145 @@
+@layer recipes.slots {
+  @layer _base {
+    .calendar__root {
+      background: var(--colors-bg-layer-floating);
+      border-radius: var(--radii-r1_5);
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      box-shadow: var(--shadows-s1);
+      color: var(--colors-fg-neutral);
+      width: 21rem;
+}
+
+    .calendar__header {
+      padding: var(--spacing-3);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+}
+
+    .calendar__title {
+      font-size: var(--font-sizes-t5);
+      line-height: var(--line-heights-t5);
+      font-weight: var(--font-weights-bold);
+}
+
+    .calendar__navButton {
+      border-radius: var(--radii-full);
+      outline: 2px solid transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--colors-fg-neutral-muted);
+      cursor: pointer;
+      outline-offset: -2px;
+      width: 2rem;
+      height: 2rem;
+}
+
+    .calendar__navButton:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      color: var(--colors-fg-disabled);
+      cursor: not-allowed;
+}
+
+    .calendar__navButton svg {
+      width: 1rem;
+      height: 1rem;
+}
+
+    .calendar__navButton:is(:focus-visible, [data-focus-visible]) {
+      outline-color: var(--colors-stroke-focus-ring);
+}
+
+    .calendar__navButton:is(:active, [data-active]) {
+      background: var(--colors-bg-transparent-pressed);
+}
+
+    @media (hover: hover) and (pointer: fine) {
+      .calendar__navButton:is(:hover, [data-hover]) {
+        background: var(--colors-bg-transparent-pressed);
+}
+}
+
+    .calendar__weekdayRow {
+      display: grid;
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+    .calendar__weekday {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--colors-fg-neutral-subtle);
+      font-size: var(--font-sizes-t4);
+      line-height: var(--line-heights-t4);
+      font-weight: var(--font-weights-medium);
+      height: 3rem;
+}
+
+    .calendar__daysGrid {
+      border-collapse: collapse;
+      table-layout: fixed;
+      width: 100%;
+}
+
+    .calendar__weekRow {
+      width: 100%;
+}
+
+    .calendar__dayWrapper {
+      padding: 0;
+      text-align: center;
+      width: 3rem;
+      height: 3rem;
+}
+
+    .calendar__dayCell {
+      border-radius: var(--radii-full);
+      outline: 2px solid transparent;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--colors-fg-neutral-muted);
+      font-size: var(--font-sizes-t5);
+      line-height: var(--line-heights-t5);
+      font-weight: var(--font-weights-medium);
+      cursor: pointer;
+      outline-offset: -2px;
+      width: 2.625rem;
+      height: 2.625rem;
+}
+
+    .calendar__dayCell[data-today=true],.calendar__dayCell[data-in-range=true] {
+      background: var(--colors-bg-neutral-weak);
+}
+
+    .calendar__dayCell[data-selected=true] {
+      background: var(--colors-bg-neutral-inverted);
+      color: var(--colors-fg-neutral-inverted);
+}
+
+    .calendar__dayCell[data-outside-month=true] {
+      color: var(--colors-fg-neutral-subtle);
+}
+
+    .calendar__dayCell:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      color: var(--colors-fg-disabled);
+      cursor: default;
+}
+
+    .calendar__dayCell:is(:focus-visible, [data-focus-visible]) {
+      outline-color: var(--colors-stroke-focus-ring);
+}
+
+    .calendar__dayCell:is(:active, [data-active]) {
+      background: var(--colors-bg-transparent-pressed);
+}
+
+    @media (hover: hover) and (pointer: fine) {
+      .calendar__dayCell:is(:hover, [data-hover]) {
+        background: var(--colors-bg-transparent-pressed);
+}
+}
+    }
+}

package/dist/recipes/center-recipe.css

@@ -0,0 +1,13 @@
+@layer recipes {
+  .center--axis_both {
+    align-items: center;
+}
+
+  .center--axis_both,.center--axis_horizontal {
+    justify-content: center;
+}
+
+  .center--axis_vertical {
+    align-items: center;
+}
+}

package/dist/recipes/checkbox-recipe.css

@@ -0,0 +1,156 @@
+@layer recipes.slots {
+  @layer _base {
+    .checkbox__root {
+      position: relative;
+      display: flex;
+}
+
+    .checkbox__label {
+      display: inline-flex;
+      align-items: center;
+      position: relative;
+      line-height: var(--line-heights-t4);
+      max-width: 100%;
+      min-height: 2.25rem;
+      padding-left: var(--spacing-8);
+}
+
+    .checkbox__input {
+      border: none;
+      margin: 0;
+      padding: 0;
+      cursor: pointer;
+      position: absolute;
+      left: 0;
+      width: 0;
+      height: 0;
+      top: 50%;
+}
+
+    .checkbox__input::after {
+      transition-property: var(--transition-prop, opacity);
+      transition-timing-function: var(--easings-easing);
+      transition-duration: var(--durations-d2);
+      --transition-duration: var(--durations-d2);
+      --transition-easing: var(--easings-easing);
+}
+
+    .checkbox__input::after,.checkbox__input::before {
+      content: "";
+      position: absolute;
+      transform: translateY(-50%);
+}
+
+    .checkbox__input::before {
+      left: 0;
+}
+
+    .checkbox__input:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+}
+
+    .checkbox__text {
+      font-size: var(--font-sizes-t4);
+      line-height: var(--line-heights-t4);
+      font-weight: var(--font-weights-bold);
+      cursor: pointer;
+}
+
+    .peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ .checkbox__text {
+      cursor: not-allowed;
+}
+}
+
+  .checkbox__input--size_md::before,.checkbox__input--size_md::after {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+  .checkbox__text--size_md {
+    padding-left: var(--spacing-1);
+}
+
+  .checkbox__input--variant_square::before {
+    border-width: 1px;
+    border-color: var(--colors-stroke-neutral-weak);
+    border-radius: var(--radii-r2);
+    background-color: var(--colors-bg-layer);
+}
+
+  .checkbox__input--variant_square::after {
+    background-color: var(--colors-fg-neutral-inverted);
+    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M10.41 17.854c-.34 0-.679-.113-.905-.453l-5.203-5.203c-.566-.565-.566-1.357 0-1.923.566-.565 1.357-.565 1.923 0l4.185 4.185 7.465-7.465c.566-.565 1.357-.565 1.923 0 .566.566.566 1.358 0 1.923l-8.37 8.37c-.34.453-.679.566-1.018.566z%27/%3E%3C/svg%3E');
+    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M10.41 17.854c-.34 0-.679-.113-.905-.453l-5.203-5.203c-.566-.565-.566-1.357 0-1.923.566-.565 1.357-.565 1.923 0l4.185 4.185 7.465-7.465c.566-.565 1.357-.565 1.923 0 .566.566.566 1.358 0 1.923l-8.37 8.37c-.34.453-.679.566-1.018.566z%27/%3E%3C/svg%3E');
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    -webkit-mask-size: contain;
+    opacity: 0;
+}
+
+  .checkbox__input--variant_square:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])::before {
+    background: var(--colors-bg-brand-solid);
+    border: none;
+}
+
+  .checkbox__input--variant_square:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])::after {
+    opacity: 1;
+}
+
+  .checkbox__input--variant_square:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])::before {
+    background: var(--colors-bg-brand-solid);
+    border: none;
+}
+
+  .checkbox__input--variant_square:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])::after {
+    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Crect x=%276%27 y=%2710.5%27 width=%2712%27 height=%273%27/%3E%3C/svg%3E');
+    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Crect x=%276%27 y=%2710.5%27 width=%2712%27 height=%273%27/%3E%3C/svg%3E');
+    opacity: 1;
+}
+
+  .checkbox__input--size_lg::before,.checkbox__input--size_lg::after {
+    width: 1.75rem;
+    height: 1.75rem;
+}
+
+  .checkbox__text--size_lg {
+    padding-left: var(--spacing-2);
+}
+
+  .checkbox__input--variant_ghost::before {
+    border: none;
+    background-color: var(--colors-bg-transparent);
+}
+
+  .checkbox__input--variant_ghost::after {
+    background-image: none;
+    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M10.41 17.854c-.34 0-.679-.113-.905-.453l-5.203-5.203c-.566-.565-.566-1.357 0-1.923.566-.565 1.357-.565 1.923 0l4.185 4.185 7.465-7.465c.566-.565 1.357-.565 1.923 0 .566.566.566 1.358 0 1.923l-8.37 8.37c-.34.453-.679.566-1.018.566z%27/%3E%3C/svg%3E');
+    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M10.41 17.854c-.34 0-.679-.113-.905-.453l-5.203-5.203c-.566-.565-.566-1.357 0-1.923.566-.565 1.357-.565 1.923 0l4.185 4.185 7.465-7.465c.566-.565 1.357-.565 1.923 0 .566.566.566 1.358 0 1.923l-8.37 8.37c-.34.453-.679.566-1.018.566z%27/%3E%3C/svg%3E');
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    -webkit-mask-size: contain;
+    background-color: var(--colors-fg-neutral-muted);
+    opacity: 1;
+}
+
+  .checkbox__input--variant_ghost:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])::before {
+    background-color: var(--colors-bg-transparent);
+}
+
+  .checkbox__input--variant_ghost:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])::after {
+    background-color: var(--colors-fg-brand);
+}
+
+  .checkbox__input--variant_ghost:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])::before {
+    background-color: var(--colors-bg-transparent);
+}
+
+  .checkbox__input--variant_ghost:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])::after {
+    background-image: none;
+    mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Crect x=%276%27 y=%2710.5%27 width=%2712%27 height=%273%27/%3E%3C/svg%3E');
+    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Crect x=%276%27 y=%2710.5%27 width=%2712%27 height=%273%27/%3E%3C/svg%3E');
+    background-color: var(--colors-fg-brand);
+    opacity: 1;
+}
+}

package/dist/recipes/dialog-recipe.css

@@ -0,0 +1,101 @@
+@layer recipes.slots {
+  @layer _base {
+    .dialog__overlay {
+      inset: 0;
+      background: var(--colors-bg-overlay);
+      position: fixed;
+}
+
+    .dialog__overlay[data-state=open] {
+      animation-name: fadeIn;
+      animation-duration: var(--durations-d5);
+      animation-timing-function: var(--easings-enter);
+}
+
+    .dialog__overlay[data-state=closed] {
+      animation-name: fadeOut;
+      animation-duration: var(--durations-d3);
+      animation-timing-function: var(--easings-exit);
+}
+
+    .dialog__close {
+      border-radius: var(--radii-r1);
+      transition-property: var(--transition-prop, opacity);
+      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+      transition-duration: var(--transition-duration, 150ms);
+      position: absolute;
+      opacity: 0.7;
+      cursor: pointer;
+      right: var(--spacing-4);
+      top: var(--spacing-4);
+}
+
+    .dialog__close:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      pointer-events: none;
+}
+
+    .dialog__close:is(:hover, [data-hover]) {
+      opacity: 1;
+}
+
+    .dialog__content {
+      background: var(--colors-bg-layer-floating);
+      border: 1px_solid;
+      padding: var(--spacing-4);
+      border-color: var(--colors-stroke-neutral-weak);
+      border-radius: var(--radii-r1_5);
+      overflow: auto;
+      overscroll-behavior: contain;
+      color: var(--colors-fg-neutral);
+      position: fixed;
+      transform: translate(-50%,-50%);
+      z-index: 1000;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      max-width: 32rem;
+      max-height: 85vh;
+}
+
+    .dialog__content[data-state=open] {
+      animation-name: contentShow;
+      animation-duration: var(--durations-d5);
+      animation-timing-function: var(--easings-enter);
+}
+
+    .dialog__content[data-state=closed] {
+      animation-name: contentHide;
+      animation-duration: var(--durations-d3);
+      animation-timing-function: var(--easings-exit);
+}
+
+    .dialog__header {
+      gap: var(--spacing-1\.5);
+      display: flex;
+      flex-direction: column;
+      color: var(--colors-fg-neutral);
+      font-size: var(--font-sizes-t5);
+      line-height: var(--line-heights-t5);
+      font-weight: var(--font-weights-bold);
+}
+
+    .dialog__footer {
+      display: flex;
+      flex-direction: column-reverse;
+      color: var(--colors-fg-neutral-muted);
+}
+
+    .dialog__title {
+      font-size: var(--font-sizes-t6);
+      line-height: var(--line-heights-t6);
+      font-weight: var(--font-weights-bold);
+}
+
+    .dialog__description {
+      font-size: var(--font-sizes-t5);
+      line-height: var(--line-heights-t5);
+      font-weight: var(--font-weights-regular);
+      color: var(--colors-fg-neutral);
+}
+    }
+}