hakumi_components 0.1.3.pre

data/app/javascript/stylesheets/components/_cascader.scss

@@ -0,0 +1,276 @@
+// Hakumi Cascader Component
+@use '../variables' as *;
+
+.hakumi-cascader {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: var(--color-text);
+    font-size: 14px;
+    line-height: 1.5714285714285714;
+    list-style: none;
+    position: relative !important;
+    display: inline-block;
+    cursor: pointer;
+    width: 100%;
+
+
+    input[type="hidden"] {
+        display: none;
+    }
+
+
+    &-selector {
+        position: relative;
+        background-color: var(--color-bg-container);
+        border: 1px solid var(--color-border);
+        border-radius: 6px;
+        transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+        width: 100%;
+        height: 32px;
+        padding: 0 30px 0 11px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        &:hover {
+            border-color: var(--color-primary-hover);
+        }
+    }
+
+
+    &-focused .hakumi-cascader-selector,
+    &-open .hakumi-cascader-selector {
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 2px var(--color-primary-bg);
+        outline: 0;
+    }
+
+
+    &-selection-item {
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        line-height: 30px;
+        user-select: none;
+    }
+
+
+    &-selection-placeholder {
+        position: absolute;
+        top: 0;
+        left: 11px;
+        right: 30px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        color: var(--color-text-placeholder);
+        line-height: 30px;
+        user-select: none;
+        pointer-events: none;
+    }
+
+
+    &-selection-search {
+        position: absolute;
+        top: 0;
+        left: 11px;
+        right: 30px;
+        bottom: 0;
+
+        &-input {
+            width: 100%;
+            height: 100%;
+            padding: 0;
+            margin: 0;
+            background: transparent;
+            border: none;
+            outline: none;
+            appearance: none;
+            font-size: 14px;
+            color: var(--color-text);
+            font-family: inherit;
+            cursor: pointer;
+
+            &::placeholder {
+                opacity: 0;
+            }
+
+
+            &::-webkit-search-decoration,
+            &::-webkit-search-cancel-button,
+            &::-webkit-search-results-button,
+            &::-webkit-search-results-decoration {
+                display: none;
+                -webkit-appearance: none;
+            }
+        }
+    }
+
+
+    &-arrow {
+        display: flex;
+        align-items: center;
+        color: var(--color-text-quaternary);
+        font-style: normal;
+        line-height: 1;
+        text-align: center;
+        text-transform: none;
+        vertical-align: -0.125em;
+        position: absolute;
+        top: 50%;
+        right: 11px;
+        width: 12px;
+        height: 12px;
+        margin-top: -6px;
+        font-size: 12px;
+        pointer-events: none;
+        transition: transform 0.3s;
+
+        .hakumi-cascader-open & {
+            transform: rotate(180deg);
+        }
+    }
+
+
+    &-clear {
+        position: absolute;
+        top: 50%;
+        right: 11px;
+        z-index: 2;
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        margin-top: -6px;
+        color: var(--color-text-quaternary);
+        font-size: 12px;
+        line-height: 1;
+        background: var(--color-bg-container);
+        cursor: pointer;
+        opacity: 0;
+        transition: color 0.3s ease, opacity 0.15s ease;
+
+        &:hover {
+            color: var(--color-text-tertiary);
+        }
+    }
+
+    &-allow-clear:hover &-clear {
+        opacity: 1;
+    }
+
+    &-allow-clear:hover &-arrow {
+        opacity: 0;
+    }
+
+
+    &-menus {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 1050;
+        margin-top: 4px;
+        background-color: var(--color-bg-elevated);
+        border-radius: 8px;
+        box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+        display: flex;
+        flex-direction: row;
+        overflow: hidden;
+        font-size: 14px;
+        white-space: nowrap;
+
+        &.hakumi-cascader-menus-hidden {
+            display: none;
+        }
+    }
+
+
+    &-menu {
+        min-width: 111px;
+        height: 180px;
+        margin: 0;
+        padding: 4px 0;
+        overflow: auto;
+        vertical-align: top;
+        list-style: none;
+        border-right: 1px solid var(--color-border-secondary);
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+
+        &:last-child {
+            border-right: none;
+        }
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+
+    &-menu-item {
+        display: flex;
+        align-items: center;
+        padding: 5px 12px;
+        overflow: hidden;
+        line-height: 22px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        cursor: pointer;
+        transition: all 0.3s;
+        color: var(--color-text);
+
+        &:hover {
+            background-color: var(--color-control-item-bg-hover);
+        }
+
+        &-active {
+            background-color: var(--color-control-item-bg-hover);
+            font-weight: 600;
+        }
+
+        &-disabled {
+            color: var(--color-text-disabled);
+            cursor: not-allowed;
+
+            &:hover {
+                background-color: transparent;
+            }
+        }
+
+        &-content {
+            flex: 1;
+        }
+
+        &-expand-icon {
+            margin-left: 4px;
+            color: var(--color-text-quaternary);
+            font-size: 10px;
+        }
+    }
+
+
+    &-sm {
+        .hakumi-cascader-selector {
+            height: 24px;
+            padding: 0 22px 0 7px;
+        }
+
+        .hakumi-cascader-selection-item,
+        .hakumi-cascader-selection-placeholder {
+            line-height: 22px;
+        }
+    }
+
+    &-lg {
+        .hakumi-cascader-selector {
+            height: 40px;
+            padding: 0 28px 0 11px;
+        }
+
+        .hakumi-cascader-selection-item,
+        .hakumi-cascader-selection-placeholder {
+            line-height: 38px;
+        }
+    }
+}

data/app/javascript/stylesheets/components/_checkbox.scss

@@ -0,0 +1,217 @@
+// Hakumi Checkbox Component
+@use '../variables' as *;
+
+.hakumi-checkbox-wrapper {
+    margin: 0;
+    padding: 0;
+    color: var(--color-text);
+    font-size: 14px;
+    line-height: 1.5714285714285714;
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: baseline;
+    margin-right: 8px;
+
+    &+.hakumi-checkbox-wrapper {
+        margin-left: 0;
+    }
+
+    &.hakumi-checkbox-wrapper-disabled {
+        cursor: not-allowed;
+        color: var(--color-text-disabled);
+    }
+
+
+    &:after {
+        display: inline-block;
+        width: 0;
+        overflow: hidden;
+        content: '\a0';
+    }
+}
+
+.hakumi-checkbox {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: var(--color-text);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5714285714285714;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    position: relative;
+    top: 0.2em;
+    line-height: 1;
+    white-space: nowrap;
+    outline: none;
+    cursor: pointer;
+
+    .hakumi-checkbox-wrapper:hover & {
+        .hakumi-checkbox-inner {
+            border-color: var(--color-primary);
+        }
+    }
+
+    &-checked {
+        &::after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: 1px solid var(--color-primary);
+            border-radius: var(--border-radius-sm);
+            visibility: hidden;
+            animation: antCheckboxEffect 0.36s ease-in-out;
+            animation-fill-mode: backwards;
+            content: '';
+        }
+
+        .hakumi-checkbox-inner {
+            background-color: var(--color-primary);
+            border-color: var(--color-primary);
+
+            &::after {
+                opacity: 1;
+                transform: rotate(45deg) scale(1) translate(-50%, -50%);
+                transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+            }
+        }
+    }
+
+    &-indeterminate {
+        .hakumi-checkbox-inner {
+            background-color: #fff;
+            border-color: #d9d9d9;
+
+            &::after {
+                top: 50%;
+                left: 50%;
+                width: 8px;
+                height: 8px;
+                background-color: var(--color-primary);
+                border: 0;
+                transform: translate(-50%, -50%) scale(1);
+                opacity: 1;
+                content: ' ';
+            }
+        }
+    }
+
+    &-disabled {
+        cursor: not-allowed;
+
+        .hakumi-checkbox-inner {
+            background-color: var(--color-bg-container-disabled);
+            border-color: var(--color-border);
+            cursor: not-allowed;
+
+            &::after {
+                border-color: var(--color-text-disabled);
+            }
+        }
+
+        &.hakumi-checkbox-checked {
+            .hakumi-checkbox-inner {
+                &::after {
+                    border-color: var(--color-text-disabled);
+                }
+            }
+        }
+
+        .hakumi-checkbox-input {
+            cursor: not-allowed;
+        }
+    }
+
+    &-input {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        opacity: 0;
+    }
+
+    &-inner {
+        position: relative;
+        top: 0;
+        left: 0;
+        display: block;
+        width: 16px;
+        height: 16px;
+        direction: ltr;
+        background-color: var(--color-bg-container);
+        border: 1px solid var(--color-border);
+        border-radius: var(--border-radius-sm);
+        border-collapse: separate;
+        transition: all 0.3s;
+
+        &:after {
+            position: absolute;
+            top: 50%;
+            left: 21.5%;
+            display: table;
+            width: 5.7142857142857135px;
+            height: 9.142857142857142px;
+            border: 2px solid #fff;
+            border-top: 0;
+            border-left: 0;
+            transform: rotate(45deg) scale(0) translate(-50%, -50%);
+            opacity: 0;
+            transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
+            content: ' ';
+        }
+    }
+
+    +span {
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+}
+
+.hakumi-checkbox-group {
+    display: inline-flex;
+    flex-wrap: wrap;
+    column-gap: 8px;
+}
+
+@keyframes antCheckboxEffect {
+    0% {
+        transform: scale(1);
+        opacity: 0.5;
+    }
+
+    100% {
+        transform: scale(1.6);
+        opacity: 0;
+    }
+}
+
+
+[data-theme='dark'] {
+    .hakumi-checkbox-inner {
+        background-color: transparent;
+    }
+
+    .hakumi-checkbox-disabled {
+        .hakumi-checkbox-inner {
+            background-color: rgba(255, 255, 255, 0.08);
+            
+            border-color: #434343;
+            
+
+            &::after {
+                border-color: rgba(255, 255, 255, 0.25);
+            }
+        }
+    }
+}

data/app/javascript/stylesheets/components/_collapse.scss

@@ -0,0 +1,148 @@
+// Hakumi Collapse Component
+@use '../variables' as *;
+
+.hakumi-collapse {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: var(--color-text);
+  background: var(--color-bg-container);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-base);
+  width: 100%;
+  overflow: hidden;
+
+  &.hakumi-collapse-borderless {
+    border: 0;
+  }
+
+  &.hakumi-collapse-ghost {
+    background: transparent;
+  }
+
+  &-item {
+    border-top: 1px solid var(--color-border);
+
+    &:first-child {
+      border-top: 0;
+    }
+
+
+
+    &.hakumi-collapse-item-disabled {
+      .hakumi-collapse-header {
+        color: var(--color-text-disabled);
+        cursor: not-allowed;
+      }
+    }
+
+    &:first-child {
+      .hakumi-collapse-header {
+        border-top-left-radius: var(--border-radius-base);
+        border-top-right-radius: var(--border-radius-base);
+      }
+    }
+
+    &:last-child {
+
+      .hakumi-collapse-header {
+        border-bottom-left-radius: var(--border-radius-base);
+        border-bottom-right-radius: var(--border-radius-base);
+      }
+
+
+      &.hakumi-collapse-item-active {
+        .hakumi-collapse-header {
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+        .hakumi-collapse-content {
+          border-bottom-left-radius: var(--border-radius-base);
+          border-bottom-right-radius: var(--border-radius-base);
+        }
+      }
+    }
+  }
+
+  &-small {
+    .hakumi-collapse-header { padding: 8px 12px; }
+  }
+
+  &-large {
+    .hakumi-collapse-header { padding: 16px 16px; font-size: var(--font-size-lg); }
+  }
+
+  &-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    color: var(--color-text);
+    background: var(--color-bg-light);
+    line-height: var(--line-height-base);
+    cursor: pointer;
+
+    .hakumi-collapse-arrow {
+      display: inline-flex;
+      color: var(--color-text-tertiary);
+      transform-origin: center;
+      will-change: transform;
+
+
+      transition: transform .2s ease;
+
+      .hakumi-icon { display: inline-flex; }
+      .hakumi-icon > svg { display: block; transition: transform .2s ease; transform-origin: center; transform: rotate(0deg); }
+    }
+
+
+
+    .hakumi-collapse-arrow-rotated .hakumi-icon > svg { transform: rotate(90deg); }
+
+    .hakumi-collapse-header-text { flex: 1 1 auto; }
+
+    .hakumi-collapse-extra { margin-left: auto; }
+  }
+
+
+  &-item:not(.hakumi-collapse-item-disabled) .hakumi-collapse-header:hover {
+    background: var(--color-control-item-bg-hover);
+  }
+
+
+  &.hakumi-collapse-ghost {
+    border: 0;
+    .hakumi-collapse-header { background: transparent; }
+    .hakumi-collapse-item { border-top: 0; }
+    .hakumi-collapse-item:not(.hakumi-collapse-item-disabled) .hakumi-collapse-header:hover { background: transparent; }
+    .hakumi-collapse-content { border-top: 0; }
+  }
+
+  &-content {
+    background: var(--color-bg-container);
+    color: var(--color-text);
+    border-top: 1px solid var(--color-border);
+    overflow: hidden;
+    height: 0;
+    transition: height .2s ease;
+
+
+
+    &-active { }
+
+    &-box { padding: 16px; }
+  }
+}
+
+[data-theme="dark"] {
+  .hakumi-collapse {
+    background: var(--color-bg-container);
+    border-color: var(--color-border);
+
+    &-content {
+      background: var(--color-bg-container);
+      border-color: var(--color-border);
+    }
+  }
+}