@okshaun/components 0.5.8 → 1.0.1

package/dist/styles/recipes/menu.css

@@ -0,0 +1,141 @@
+@layer recipes.slots {
+  @layer _base {
+    .oks-menu__menu {
+      border-radius: var(--oks-radii-8);
+      flex-direction: column;
+      box-shadow: var(--oks-shadows-medium);
+      z-index: 1000;
+      min-width: var(--oks-sizes-200);
+      max-width: 320px;
+      max-height: 400px;
+      overflow-y: auto;
+}
+
+    .oks-menu__menu,.oks-menu__menuItem {
+      background: var(--oks-colors-surface-overlay);
+      outline: var(--oks-borders-none);
+      display: flex;
+}
+
+    .oks-menu__menuItem {
+      gap: var(--oks-spacing-8);
+      padding-inline: var(--oks-spacing-12);
+      padding-block: var(--oks-spacing-8);
+      align-items: flex-start;
+      cursor: pointer;
+      transition-property: background-color, color;
+      --transition-duration: var(--oks-durations-fast);
+      transition-duration: var(--oks-durations-fast);
+}
+
+    .oks-menu__menuItem:is([aria-selected=true], [data-selected=true]) {
+      background: var(--oks-colors-bg-selected);
+}
+
+    .oks-menu__menuItem:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+}
+
+    .oks-menu__menuItem:is(:focus-visible, [data-focus-visible=true]) {
+      background: var(--oks-colors-surface-overlay-hovered);
+}
+
+    .oks-menu__menuItem:is(:hover, [data-hover=true]) {
+      background: var(--oks-colors-surface-overlay-hovered);
+}
+
+    .oks-menu__menuItem:is(:active, [data-active=true]) {
+      background: var(--oks-colors-surface-overlay-hovered);
+}
+
+    .oks-menu__menuItemIndicator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      color: var(--oks-colors-icon-selected);
+      width: var(--oks-sizes-24);
+      height: var(--oks-sizes-24);
+}
+
+    .oks-menu__menuItemIconLeft,.oks-menu__menuItemIconRight {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      color: var(--oks-colors-icon-decorative);
+      width: var(--oks-sizes-24);
+      height: var(--oks-sizes-24);
+}
+
+    .oks-menu__menuItemIconRight {
+      margin-left: var(--oks-spacing-auto);
+}
+
+    .oks-menu__menuItemContent {
+      flex: 1 1 0%;
+      display: flex;
+      flex-direction: column;
+      min-width: var(--oks-sizes-0);
+}
+
+    .oks-menu__menuItemLabel {
+      font-size: var(--oks-font-sizes-16);
+      color: var(--oks-colors-text);
+      font-family: var(--oks-fonts-sans);
+      font-weight: var(--oks-font-weights-normal);
+}
+
+    .oks-menu__menuItemLabel mark {
+      background: var(--oks-colors-bg-warning-hovered);
+      border-radius: var(--oks-radii-2);
+      color: var(--oks-colors-text-bold);
+}
+
+    .oks-menu__menuItemDescription {
+      font-size: var(--oks-font-sizes-12);
+      font-family: var(--oks-fonts-sans);
+      color: var(--oks-colors-text-subtlest);
+}
+
+    .oks-menu__menuDivider {
+      background: var(--oks-colors-border);
+      margin-inline: var(--oks-spacing-12);
+      margin-block: var(--oks-spacing-4);
+      height: var(--oks-sizes-1);
+}
+
+    .oks-menu__menuGroup {
+      display: flex;
+      flex-direction: column;
+}
+
+    .oks-menu__menuGroupLabel {
+      padding-inline: var(--oks-spacing-12);
+      font-size: var(--oks-font-sizes-12);
+      color: var(--oks-colors-text-subtlest);
+      font-family: var(--oks-fonts-sans);
+      padding-top: var(--oks-spacing-16);
+      padding-bottom: var(--oks-spacing-4);
+}
+}
+
+  .oks-menu__menu--packing_default {
+    min-width: var(--oks-sizes-200);
+}
+
+  .oks-menu__menuItem--packing_default {
+    padding-block: var(--oks-spacing-8);
+}
+
+  .oks-menu__menuItem--indicatorPosition_left,.oks-menu__menuItem--indicatorPosition_right {
+    flex-direction: row;
+}
+
+  .oks-menu__menuItemIndicator--indicatorPosition_right {
+    order: 999;
+    margin-left: var(--oks-spacing-auto);
+}
+}

package/dist/styles/recipes/modal.css

@@ -0,0 +1,99 @@
+@layer recipes.slots {
+  @layer _base {
+    .oks-modal__overlay {
+      inset: var(--oks-spacing-0);
+      background: var(--oks-colors-blanket);
+      animation: modalFadeIn 150ms ease-out forwards;
+      position: fixed;
+      z-index: 1100;
+      opacity: 0;
+}
+
+    .oks-modal__overlay[data-state="closing"] {
+      animation: modalFadeOut 150ms ease-out forwards;
+}
+
+    .oks-modal__container {
+      background: var(--oks-colors-surface-overlay);
+      animation: modalScaleIn 150ms ease-out forwards;
+      border-radius: 12px;
+      outline: var(--oks-borders-none);
+      position: fixed;
+      display: flex;
+      flex-direction: column;
+      box-shadow: var(--oks-shadows-overlay);
+      z-index: 1101;
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.95) translateY(-10px);
+      top: 50%;
+      left: 50%;
+      max-height: 90vh;
+}
+
+    .oks-modal__container[data-state="closing"] {
+      animation: modalScaleOut 150ms ease-out forwards;
+}
+
+    .oks-modal__header {
+      gap: var(--oks-spacing-12);
+      padding-inline: var(--oks-spacing-20);
+      padding-block: var(--oks-spacing-12);
+      border-bottom: var(--oks-borders-default);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+}
+
+    .oks-modal__title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: var(--oks-sizes-full);
+}
+
+    .oks-modal__body {
+      flex: 1 1 0%;
+      gap: var(--oks-spacing-16);
+      padding-block: var(--oks-spacing-16);
+      color: var(--oks-colors-text);
+      overflow-y: auto;
+}
+
+    .oks-modal__body,.oks-modal__footer {
+      padding-inline: var(--oks-spacing-20);
+}
+
+    .oks-modal__footer {
+      gap: var(--oks-spacing-8);
+      padding-block: var(--oks-spacing-12);
+      border-top: var(--oks-borders-default);
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+}
+}
+
+  .oks-modal__container--size_md {
+    max-width: 560px;
+}
+
+  .oks-modal__title--size_md {
+    font-size: lg;
+}
+
+  .oks-modal__container--size_sm {
+    max-width: 400px;
+}
+
+  .oks-modal__title--size_sm {
+    font-size: md;
+}
+
+  .oks-modal__container--size_lg {
+    max-width: 720px;
+}
+
+  .oks-modal__title--size_lg {
+    font-size: xl;
+}
+}

package/dist/styles/recipes/pre.css

@@ -0,0 +1,16 @@
+@layer recipes {
+  @layer _base {
+    .oks-pre {
+      background: var(--oks-colors-gray-80);
+      border-radius: var(--oks-radii-8);
+      overflow: hidden;
+      border-width: var(--oks-border-widths-0);
+      border-color: var(--oks-colors-gray-60);
+      padding-inline: var(--oks-spacing-16);
+      padding-block: var(--oks-spacing-8);
+      margin-block: var(--oks-spacing-8);
+      color: var(--oks-colors-gray-10);
+      white-space: pre;
+}
+    }
+}

package/dist/styles/recipes/radio-input.css

@@ -0,0 +1,7 @@
+@layer recipes {
+  @layer _base {
+    .oks-radio-input {
+      display: flex;
+}
+    }
+}

package/dist/styles/recipes/radio.css

@@ -0,0 +1,82 @@
+@layer recipes.slots {
+  @layer _base {
+    .oks-radio__container {
+      gap: var(--oks-spacing-4);
+      position: relative;
+      display: inline-grid;
+      grid-template-columns: auto 1fr;
+      align-items: start;
+      cursor: pointer;
+      -webkit-user-select: none;
+      user-select: none;
+}
+
+    .oks-radio__input {
+      margin: var(--oks-spacing-0);
+      padding: var(--oks-spacing-0);
+      position: absolute;
+      opacity: 0;
+      z-index: 1;
+      cursor: inherit;
+      width: var(--oks-sizes-full);
+      height: var(--oks-sizes-full);
+}
+
+    .oks-radio__input ~ [name='radio'] {
+      display: inline-grid;
+}
+
+    .oks-radio__input:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      display: inline-grid;
+}
+
+    .oks-radio__input:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ svg {
+      opacity: 0.4;
+      pointer-events: none;
+      cursor: none;
+}
+
+    .oks-radio__input:is([data-error], [data-error=true]) {
+      display: inline-grid;
+}
+
+    .oks-radio__input:is([data-error], [data-error=true]) ~ svg {
+      fill: var(--oks-colors-red-50);
+}
+
+    .oks-radio__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='radio-checked'] {
+      display: inline-grid;
+      fill: var(--oks-colors-gray-90);
+}
+
+    .dark .oks-radio__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='radio-checked'],.oks-radio__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='radio-checked']:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-radio__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='radio-checked'] {
+      fill: var(--oks-colors-gray-10);
+}
+
+    .oks-radio__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='radio'] {
+      display: none;
+}
+
+    .oks-radio__input:is(:focus-visible, [data-focus-visible=true]) ~ [name='radio-focus'] {
+      display: inline-grid;
+      position: absolute;
+      fill: var(--oks-colors-gray-90);
+}
+
+    .dark .oks-radio__input:is(:focus-visible, [data-focus-visible=true]) ~ [name='radio-focus'],.oks-radio__input:is(:focus-visible, [data-focus-visible=true]) ~ [name='radio-focus']:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-radio__input:is(:focus-visible, [data-focus-visible=true]) ~ [name='radio-focus'] {
+      fill: gray.1;
+}
+
+    .oks-radio__indicator {
+      place-content: center;
+      display: none;
+      width: var(--oks-sizes-24);
+      height: var(--oks-sizes-24);
+}
+
+    .oks-radio__indicator:is([name='radio']) {
+      display: inline-grid;
+      fill: var(--oks-colors-gray-20);
+}
+    }
+}

package/dist/styles/recipes/select.css

@@ -0,0 +1,103 @@
+@layer recipes.slots {
+  @layer _base {
+    .oks-select__trigger {
+      background: var(--oks-colors-bg-input);
+      gap: var(--oks-spacing-8);
+      border-width: var(--oks-border-widths-1);
+      border-style: solid;
+      border-color: var(--oks-colors-border-input);
+      border-radius: var(--oks-radii-4);
+      outline: var(--oks-borders-none);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: var(--oks-colors-text);
+      font-family: var(--oks-fonts-body);
+      cursor: pointer;
+      --transition-duration: var(--oks-durations-fast);
+      transition-duration: var(--oks-durations-fast);
+      transition-property: background, border-color, color, outline-color;
+      --transition-easing: var(--oks-easings-default);
+      transition-timing-function: var(--oks-easings-default);
+      width: var(--oks-sizes-full);
+}
+
+    .oks-select__trigger:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      background: var(--oks-colors-bg-disabled);
+      border-color: var(--oks-colors-border-disabled);
+      color: var(--oks-colors-text-disabled);
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+    .oks-select__trigger:is([data-error], [data-error=true]) {
+      background: var(--oks-colors-bg-danger);
+      border-color: var(--oks-colors-border-danger);
+}
+
+    .oks-select__trigger:is([data-error], [data-error=true]):is(:hover, [data-hover=true]) {
+      background: var(--oks-colors-bg-danger-hovered);
+}
+
+    .oks-select__trigger:is([data-error], [data-error=true]):is(:focus, [data-focus=true]) {
+      border-color: var(--oks-colors-border-danger);
+      outline-color: var(--oks-colors-border-danger);
+}
+
+    .oks-select__trigger:is(:focus, [data-focus=true]) {
+      border-color: var(--oks-colors-border-focused);
+      outline-width: var(--oks-border-widths-2);
+      outline-offset: calc(var(--oks-spacing-1) * -1);
+      outline-style: solid;
+      outline-color: var(--oks-colors-border-focused);
+}
+
+    .oks-select__trigger:is(:hover, [data-hover=true]) {
+      background: var(--oks-colors-bg-input-hovered);
+}
+
+    .oks-select__value {
+      flex: 1 1 0%;
+      text-align: left;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--oks-colors-text);
+}
+
+    .oks-select__value::placeholder,.oks-select__value[data-placeholder] {
+      color: var(--oks-colors-text-subtlest);
+}
+
+    .oks-select__placeholder {
+      color: var(--oks-colors-text-subtlest);
+}
+
+    .oks-select__icon {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      color: var(--oks-colors-icon-decorative);
+      --transition-duration: var(--oks-durations-normal);
+      transition-duration: var(--oks-durations-normal);
+      transition-property: transform;
+      --transition-easing: var(--oks-easings-default);
+      transition-timing-function: var(--oks-easings-default);
+}
+
+    .oks-select__icon[data-open="true"] {
+      transform: rotate(180deg);
+}
+}
+
+  .oks-select__trigger--size_md {
+    padding-block: var(--oks-spacing-3);
+    padding-inline: var(--oks-spacing-12);
+    font-size: var(--oks-font-sizes-16);
+}
+
+  .oks-select__icon--size_md {
+    width: var(--oks-sizes-24);
+    height: var(--oks-sizes-24);
+}
+}

package/dist/styles/recipes/spinner.css

@@ -0,0 +1,36 @@
+@layer recipes {
+  @layer _base {
+    .oks-spinner {
+      animation: var(--oks-animations-spin);
+      border-radius: var(--oks-radii-100);
+      border-width: 3px;
+      border-style: solid;
+      border-color: var(--oks-colors-transparent);
+      aspect-ratio: var(--oks-aspect-ratios-square);
+      isolation: isolate;
+      border-top-color: var(--oks-colors-icon);
+      border-bottom-color: var(--oks-colors-icon);
+}
+}
+
+  .oks-spinner--size_sm {
+    border-width: var(--oks-border-widths-2);
+    height: var(--oks-sizes-20);
+    min-height: var(--oks-sizes-20);
+}
+
+  .oks-spinner--size_md {
+    height: var(--oks-sizes-24);
+    min-height: var(--oks-sizes-24);
+}
+
+  .oks-spinner--size_lg {
+    height: var(--oks-sizes-32);
+    min-height: var(--oks-sizes-32);
+}
+
+  .oks-spinner--inverse_true {
+    border-top-color: var(--oks-colors-icon-inverse);
+    border-bottom-color: var(--oks-colors-icon-inverse);
+}
+}

package/dist/styles/recipes/tag.css

@@ -0,0 +1,27 @@
+@layer recipes {
+  @layer _base {
+    .oks-tag {
+      padding-block: var(--oks-spacing-0);
+      border-radius: var(--oks-radii-2);
+      gap: var(--oks-spacing-1);
+      padding-inline: var(--oks-spacing-4);
+      display: flex;
+      font-family: var(--oks-fonts-sans);
+      font-size: var(--oks-font-sizes-14);
+      font-weight: 500;
+      white-space: nowrap;
+      height: var(--oks-sizes-20);
+      width: fit-content;
+}
+}
+
+  .oks-tag--iconPosition_left {
+    gap: var(--oks-spacing-1);
+    flex-direction: row;
+    padding-left: var(--oks-spacing-1);
+}
+
+  .oks-tag--hasIcon_false {
+    padding-inline: var(--oks-spacing-4);
+}
+}

package/dist/styles/recipes/text.css

@@ -0,0 +1,46 @@
+@layer recipes {
+  @layer _base {
+    .oks-text {
+      margin: var(--oks-spacing-0);
+      line-height: var(--oks-line-heights-default);
+      font-weight: var(--oks-font-weights-normal);
+      font-size: var(--oks-font-sizes-16);
+      color: var(--oks-colors-text-subtlest);
+      max-width: var(--oks-sizes-prose);
+}
+}
+
+  .oks-text--family_mono {
+    font-family: var(--oks-fonts-mono);
+}
+
+  .oks-text--family_inherit {
+    font-family: inherit;
+}
+
+  .oks-text--italic_true {
+    font-style: italic;
+}
+
+  .oks-text--bold_true {
+    font-weight: var(--oks-font-weights-bold);
+}
+
+  .oks-text--underline_true {
+    text-decoration: underline;
+}
+
+  .oks-text--size_14 {
+    font-size: var(--oks-sizes-14);
+}
+
+  .oks-text--weight_bold {
+    font-weight: 700;
+}
+
+  .oks-text--allcaps_true {
+    text-transform: uppercase;
+    font-weight: var(--oks-font-weights-bold);
+    letter-spacing: var(--oks-letter-spacings-widest);
+}
+}

package/dist/styles/recipes/textarea.css

@@ -0,0 +1,91 @@
+@layer recipes {
+  @layer _base {
+    .oks-textarea {
+      background: var(--oks-colors-bg-input);
+      border-width: var(--oks-border-widths-1);
+      border-style: solid;
+      border-color: var(--oks-colors-border-input);
+      border-radius: var(--oks-radii-4);
+      display: inline-grid;
+      position: relative;
+      vertical-align: top;
+      outline-width: var(--oks-border-widths-2);
+      outline-offset: calc(var(--oks-spacing-1) * -1);
+      outline-style: solid;
+      outline-color: var(--oks-colors-transparent);
+      line-height: var(--oks-line-heights-default);
+      font-family: var(--oks-fonts-body);
+      color: var(--oks-colors-text);
+      --transition-duration: var(--oks-durations-fast);
+      transition-duration: var(--oks-durations-fast);
+      transition-property: background, border-color, color, outline-color;
+      --transition-easing: var(--oks-easings-default);
+      transition-timing-function: var(--oks-easings-default);
+      width: var(--oks-sizes-full);
+}
+
+    .oks-textarea:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      background: var(--oks-colors-bg-disabled);
+      border-color: var(--oks-colors-border-disabled);
+      color: var(--oks-colors-text-disabled);
+}
+
+    .oks-textarea:is([data-error], [data-error=true]) {
+      background: var(--oks-colors-bg-danger);
+      border-color: var(--oks-colors-border-danger);
+      display: inline-grid;
+      color: var(--oks-colors-text-danger);
+}
+
+    .oks-textarea:is([data-error], [data-error=true]):is(:hover, [data-hover=true]) {
+      background: var(--oks-colors-bg-danger-hovered);
+      border-color: var(--oks-colors-border-danger);
+}
+
+    .oks-textarea:is([data-error], [data-error=true]):is(:focus, [data-focus=true]) {
+      background: var(--oks-colors-bg-danger);
+      border-color: var(--oks-colors-border-danger);
+      outline-color: var(--oks-colors-border-danger);
+}
+
+    .oks-textarea:is([data-error], [data-error=true])::placeholder,.oks-textarea:is([data-error], [data-error=true])[data-placeholder] {
+      --mix-color: color-mix(in srgb, var(--oks-colors-text-danger) 60%, transparent);
+      color: var(--mix-color, var(--oks-colors-text-danger));
+}
+
+    .oks-textarea::placeholder,.oks-textarea[data-placeholder] {
+      color: var(--oks-colors-text-placeholder);
+}
+
+    .oks-textarea:is(:focus, [data-focus=true]) {
+      background: var(--oks-colors-bg-input-pressed);
+      border-color: var(--oks-colors-border-focused);
+      outline-color: var(--oks-colors-border-focused);
+}
+}
+
+  .oks-textarea--size_md {
+    padding-block: var(--oks-spacing-3);
+    padding-inline: var(--oks-spacing-10);
+    font-size: var(--oks-font-sizes-16);
+    min-height: var(--oks-sizes-64);
+}
+
+  .oks-textarea--size_sm {
+    padding-block: var(--oks-spacing-0);
+    padding-inline: var(--oks-spacing-8);
+    font-size: var(--oks-font-sizes-14);
+    min-height: var(--oks-sizes-48);
+}
+
+  .oks-textarea--size_lg {
+    padding-block: var(--oks-spacing-7);
+    padding-inline: var(--oks-spacing-12);
+    font-size: var(--oks-font-sizes-16);
+    min-height: var(--oks-sizes-80);
+}
+
+  .oks-textarea--autoSize_false {
+    width: var(--oks-sizes-full);
+}
+}