lumen-plus 0.0.3 → 0.0.4

package/dist/theme-chalk/pin-input.scss

@@ -0,0 +1,192 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('pin-input') {
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+
+    @include e('input') {
+        // Layout
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        box-sizing: border-box;
+        
+        // Typography
+        font-size: $font-size-base;
+        font-weight: 500;
+        text-align: center;
+        line-height: 1;
+        color: $color-text-primary;
+        
+        // Visual
+        background-color: $bg-color;
+        border: 1px solid $border-color-base;
+        border-radius: $border-radius-medium;
+        outline: none;
+        
+        // Transition
+        transition: border-color 0.2s ease, box-shadow 0.2s ease;
+        
+        // Placeholder
+        &::placeholder {
+            color: $color-text-placeholder;
+        }
+
+        // States - Hover
+        &:hover:not(:disabled):not(:focus) {
+            border-color: $color-text-secondary;
+        }
+
+        // States - Focus
+        &:focus {
+            border-color: $color-primary;
+            
+            &::placeholder {
+                color: transparent;
+            }
+        }
+
+        @include when('focused') {
+            border-color: $color-primary;
+        }
+
+        // States - Disabled
+        &:disabled {
+            background-color: #f5f7fa;
+            color: $color-text-disabled;
+            border-color: $border-color-lighter;
+            cursor: not-allowed;
+        }
+    }
+
+    // Modifier - Small
+    @include m('small') {
+        gap: 6px;
+
+        .#{$namespace}-pin-input__input {
+            width: 24px;
+            height: 24px;
+            font-size: $font-size-small;
+        }
+    }
+
+    // Modifier - Large
+    @include m('large') {
+        gap: 10px;
+
+        .#{$namespace}-pin-input__input {
+            width: 40px;
+            height: 40px;
+            font-size: $font-size-large;
+        }
+    }
+
+    // Modifier - Password
+    @include when('password') {
+        .#{$namespace}-pin-input__input {
+            position: relative;
+
+            &::placeholder {
+                color: transparent;
+            }
+
+            // Password dot placeholder
+            &:placeholder-shown:not(:focus)::after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                width: 6px;
+                height: 6px;
+                transform: translate(-50%, -50%);
+                background-color: $color-text-primary;
+                border-radius: 50%;
+                pointer-events: none;
+            }
+        }
+
+        &.#{$namespace}-pin-input--small .#{$namespace}-pin-input__input:placeholder-shown:not(:focus)::after {
+            width: 5px;
+            height: 5px;
+        }
+
+        &.#{$namespace}-pin-input--large .#{$namespace}-pin-input__input:placeholder-shown:not(:focus)::after {
+            width: 7px;
+            height: 7px;
+        }
+    }
+
+    // Modifier - Complete
+    @include when('complete') {
+        .#{$namespace}-pin-input__input {
+            border-color: $color-success;
+        }
+    }
+
+    // Modifier - Disabled
+    @include when('disabled') {
+        .#{$namespace}-pin-input__input {
+            background-color: #f5f7fa;
+            color: $color-text-disabled;
+            border-color: $border-color-lighter;
+            cursor: not-allowed;
+        }
+    }
+}
+
+.dark {
+    .#{$namespace}-pin-input {
+        .#{$namespace}-pin-input__input {
+            background-color: $bg-color-dark-light;
+            border-color: color-mix(in oklab, $bg-color-dark-lighter 70%, $color-text-dark-secondary);
+            color: $color-text-dark;
+
+            &::placeholder {
+                color: $color-text-dark-secondary;
+            }
+
+            &:hover:not(:disabled):not(:focus) {
+                border-color: color-mix(in oklab, $bg-color-dark-lighter 55%, $color-text-dark-secondary);
+            }
+
+            &:focus {
+                border-color: $color-primary;
+            }
+
+            &.is-focused {
+                border-color: $color-primary;
+            }
+
+            &:disabled {
+                background-color: $bg-color-dark-lighter;
+                color: $color-text-dark-secondary;
+                border-color: color-mix(in oklab, $bg-color-dark-lighter 75%, $color-text-dark-secondary);
+            }
+        }
+
+        &.is-complete {
+            .#{$namespace}-pin-input__input {
+                border-color: $color-success;
+            }
+        }
+
+        &.is-password {
+            .#{$namespace}-pin-input__input:placeholder-shown:not(:focus)::after {
+                background-color: $color-text-dark;
+            }
+        }
+
+        &.is-disabled {
+            .#{$namespace}-pin-input__input {
+                background-color: $bg-color-dark-lighter;
+                color: $color-text-dark-secondary;
+                border-color: color-mix(in oklab, $bg-color-dark-lighter 75%, $color-text-dark-secondary);
+            }
+        }
+    }
+}

package/dist/theme-chalk/popconfirm.scss

@@ -0,0 +1,194 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('popconfirm') {
+    position: relative;
+    display: inline-block;
+    width: fit-content;
+
+    @include e('reference') {
+        display: inline-block;
+        cursor: pointer;
+    }
+
+    @include e('popper') {
+        position: absolute;
+        z-index: 2000;
+        
+        // Variables
+        --l-popconfirm-bg: #ffffff;
+        --l-popconfirm-border: #e4e7ed;
+        --l-popconfirm-padding: 12px;
+        --l-popconfirm-radius: 8px;
+        --arrow-size: 10px;
+        
+        background: var(--l-popconfirm-bg);
+        padding: var(--l-popconfirm-padding);
+        border-radius: var(--l-popconfirm-radius);
+        border: 1px solid var(--l-popconfirm-border);
+        
+        // Animation state
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+        transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), 
+                    transform 0.2s cubic-bezier(0.23, 1, 0.32, 1),
+                    visibility 0.2s;
+
+        // Placements
+        &.is-top {
+            bottom: calc(100% + 12px);
+            left: 50%;
+            transform: translateX(-50%) translateY(4px) scale(0.95);
+            transform-origin: center bottom;
+
+            .#{$namespace}-popconfirm__arrow {
+                bottom: calc(-1 * (var(--arrow-size) * 0.55) + 1px);
+                left: 50%;
+                margin-left: calc(-1 * (var(--arrow-size) / 2));
+                
+                &::before {
+                    box-shadow: 1px 1px 0 0 var(--l-popconfirm-border);
+                }
+            }
+        }
+
+        &.is-bottom {
+            top: calc(100% + 12px);
+            left: 50%;
+            transform: translateX(-50%) translateY(-4px) scale(0.95);
+            transform-origin: center top;
+
+            .#{$namespace}-popconfirm__arrow {
+                top: calc(-1 * (var(--arrow-size) * 0.55) + 1px);
+                left: 50%;
+                margin-left: calc(-1 * (var(--arrow-size) / 2));
+                
+                &::before {
+                    box-shadow: -1px -1px 0 0 var(--l-popconfirm-border);
+                }
+            }
+        }
+
+        &.is-left {
+            right: calc(100% + 12px);
+            top: 50%;
+            transform: translateY(-50%) translateX(4px) scale(0.95);
+            transform-origin: right center;
+
+            .#{$namespace}-popconfirm__arrow {
+                right: calc(-1 * (var(--arrow-size) * 0.55) + 1px);
+                top: 50%;
+                margin-top: calc(-1 * (var(--arrow-size) / 2));
+                
+                &::before {
+                    box-shadow: 1px -1px 0 0 var(--l-popconfirm-border);
+                }
+            }
+        }
+
+        &.is-right {
+            left: calc(100% + 12px);
+            top: 50%;
+            transform: translateY(-50%) translateX(-4px) scale(0.95);
+            transform-origin: left center;
+
+            .#{$namespace}-popconfirm__arrow {
+                left: calc(-1 * (var(--arrow-size) * 0.55) + 1px);
+                top: 50%;
+                margin-top: calc(-1 * (var(--arrow-size) / 2));
+                
+                &::before {
+                    box-shadow: -1px 1px 0 0 var(--l-popconfirm-border);
+                }
+            }
+        }
+    }
+
+    @include e('arrow') {
+        position: absolute;
+        width: var(--arrow-size);
+        height: var(--arrow-size);
+        z-index: -1;
+        pointer-events: none;
+        
+        &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--l-popconfirm-bg);
+            transform: rotate(45deg);
+            border-radius: calc(var(--arrow-size) * 0.2);
+        }
+    }
+
+    @include e('content') {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        margin-bottom: 12px;
+    }
+
+    @include e('icon') {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 2px;
+    }
+
+    @include e('title') {
+        flex: 1;
+        font-size: 14px;
+        line-height: 1.5;
+        color: #303133;
+        word-break: break-word;
+    }
+
+    @include e('actions') {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 8px;
+    }
+
+    // Visible State
+    @include when('visible') {
+        .#{$namespace}-popconfirm__popper {
+            opacity: 1;
+            visibility: visible;
+            pointer-events: auto;
+            
+            &.is-top {
+                transform: translateX(-50%) translateY(0) scale(1);
+            }
+            &.is-bottom {
+                transform: translateX(-50%) translateY(0) scale(1);
+            }
+            &.is-left {
+                transform: translateY(-50%) translateX(0) scale(1);
+            }
+            &.is-right {
+                transform: translateY(-50%) translateX(0) scale(1);
+            }
+        }
+    }
+}
+
+// Dark mode
+.dark {
+    .#{$namespace}-popconfirm__popper {
+        --l-popconfirm-bg: #1f1f1f;
+        --l-popconfirm-border: #3a3a3a;
+
+        .#{$namespace}-popconfirm__arrow::before {
+            background: var(--l-popconfirm-bg);
+        }
+    }
+
+    .#{$namespace}-popconfirm__title {
+        color: #e5e5e5;
+    }
+}

package/dist/theme-chalk/popover.scss

@@ -0,0 +1,196 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('popover') {
+  position: relative;
+  display: inline-block;
+
+  @include e('reference') {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  @include e('popper') {
+    position: absolute;
+    z-index: 1000;
+
+    // Variables
+    --l-popover-bg: #ffffff;
+    --l-popover-border: rgba(0, 0, 0, 0.08);
+    --l-popover-padding: 8px 10px;
+    --l-popover-radius: 6px;
+    --arrow-size: 12px;
+
+    background: var(--l-popover-bg);
+    border: 1px solid var(--l-popover-border);
+    border-radius: var(--l-popover-radius);
+    padding: var(--l-popover-padding);
+    color: #222;
+    min-width: 200px;
+    max-width: 320px;
+
+    // Animation state
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
+
+    // Placements (gap 12px)
+    &.is-top {
+      bottom: calc(100% + 12px);
+      left: 50%;
+      transform: translateX(-50%) translateY(4px) scale(0.95);
+      transform-origin: center bottom;
+    }
+
+    &.is-top-start { bottom: calc(100% + 12px); left: 0; }
+    &.is-top-end { bottom: calc(100% + 12px); right: 0; }
+
+    &.is-bottom {
+      top: calc(100% + 12px);
+      left: 50%;
+      transform: translateX(-50%) translateY(-4px) scale(0.95);
+      transform-origin: center top;
+    }
+
+    &.is-bottom-start { top: calc(100% + 12px); left: 0; }
+    &.is-bottom-end { top: calc(100% + 12px); right: 0; }
+
+    &.is-left {
+      right: calc(100% + 12px);
+      top: 50%;
+      transform: translateY(-50%) translateX(4px) scale(0.95);
+      transform-origin: right center;
+    }
+
+    &.is-left-start { right: calc(100% + 12px); top: 0; }
+    &.is-left-end { right: calc(100% + 12px); bottom: 0; }
+
+    &.is-right {
+      left: calc(100% + 12px);
+      top: 50%;
+      transform: translateY(-50%) translateX(-4px) scale(0.95);
+      transform-origin: left center;
+    }
+
+    &.is-right-start { left: calc(100% + 12px); top: 0; }
+    &.is-right-end { left: calc(100% + 12px); bottom: 0; }
+  }
+
+  @include e('arrow') {
+    position: absolute;
+    width: var(--arrow-size);
+    height: var(--arrow-size);
+    pointer-events: none;
+    z-index: -1;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      background: var(--l-popover-bg);
+      transform: rotate(45deg);
+      border-radius: calc(var(--arrow-size) * 0.2);
+    }
+  }
+
+  @include e('content') {
+    font-size: 13px;
+    line-height: 1.4;
+  }
+
+  // Visible state: group identical transforms for brevity
+  @include when('visible') {
+    .#{$namespace}-popover__popper {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .#{$namespace}-popover__popper.is-top,
+    .#{$namespace}-popover__popper.is-bottom {
+      transform: translateX(-50%) translateY(0) scale(1);
+    }
+
+    .#{$namespace}-popover__popper.is-left,
+    .#{$namespace}-popover__popper.is-right {
+      transform: translateY(-50%) translateX(0) scale(1);
+    }
+  }
+}
+
+// Arrow positioning blocks using namespace; arrow pulled into content to hide sharp corners
+.#{$namespace}-popover__popper.is-top,
+.#{$namespace}-popover__popper.is-top-start,
+.#{$namespace}-popover__popper.is-top-end {
+  .#{$namespace}-popover__arrow {
+    bottom: calc(-1 * (var(--arrow-size) * 0.5) + 1px);
+    left: 50%;
+    transform: translateX(-50%);
+
+    &::before { box-shadow: 1px 1px 0 0 var(--l-popover-border); }
+  }
+}
+
+.#{$namespace}-popover__popper.is-top-start .#{$namespace}-popover__arrow { left: 12px; transform: none; }
+.#{$namespace}-popover__popper.is-top-end .#{$namespace}-popover__arrow { left: auto; right: 12px; transform: none; }
+
+.#{$namespace}-popover__popper.is-bottom,
+.#{$namespace}-popover__popper.is-bottom-start,
+.#{$namespace}-popover__popper.is-bottom-end {
+  .#{$namespace}-popover__arrow {
+    top: calc(-1 * (var(--arrow-size) * 0.5) + 1px);
+    left: 50%;
+    transform: translateX(-50%);
+
+    &::before { box-shadow: -1px -1px 0 0 var(--l-popover-border); }
+  }
+}
+
+.#{$namespace}-popover__popper.is-bottom-start .#{$namespace}-popover__arrow { left: 12px; transform: none; }
+.#{$namespace}-popover__popper.is-bottom-end .#{$namespace}-popover__arrow { left: auto; right: 12px; transform: none; }
+
+.#{$namespace}-popover__popper.is-left,
+.#{$namespace}-popover__popper.is-left-start,
+.#{$namespace}-popover__popper.is-left-end {
+  .#{$namespace}-popover__arrow {
+    right: calc(-1 * (var(--arrow-size) * 0.5) + 1px);
+    top: 50%;
+    transform: translateY(-50%);
+
+    &::before { box-shadow: 1px -1px 0 0 var(--l-popover-border); }
+  }
+}
+
+.#{$namespace}-popover__popper.is-left-start .#{$namespace}-popover__arrow { top: 12px; transform: none; }
+.#{$namespace}-popover__popper.is-left-end .#{$namespace}-popover__arrow { top: auto; bottom: 12px; transform: none; }
+
+.#{$namespace}-popover__popper.is-right,
+.#{$namespace}-popover__popper.is-right-start,
+.#{$namespace}-popover__popper.is-right-end {
+  .#{$namespace}-popover__arrow {
+    left: calc(-1 * (var(--arrow-size) * 0.5) + 1px);
+    top: 50%;
+    transform: translateY(-50%);
+
+    &::before { box-shadow: -1px 1px 0 0 var(--l-popover-border); }
+  }
+}
+
+.#{$namespace}-popover__popper.is-right-start .#{$namespace}-popover__arrow { top: 12px; transform: none; }
+.#{$namespace}-popover__popper.is-right-end .#{$namespace}-popover__arrow { top: auto; bottom: 12px; transform: none; }
+
+// Dark mode
+.dark {
+  .#{$namespace}-popover__popper {
+    --l-popover-bg: #1f1f1f;
+    --l-popover-border: rgba(255, 255, 255, 0.1);
+
+    color: #e5e5e5;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+
+    .#{$namespace}-popover__arrow::before { background: var(--l-popover-bg); }
+  }
+}

package/dist/theme-chalk/progress.scss

@@ -0,0 +1,51 @@
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('progress') {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+
+    @include e('track') {
+        position: relative;
+        flex: 1;
+        background-color: $border-color-lighter;
+        border-radius: $border-radius-round;
+        overflow: hidden;
+    }
+
+    @include e('bar') {
+        height: 6px;
+        width: 0;
+        background-color: $color-primary;
+        border-radius: $border-radius-round;
+        transition: width 0.2s $transition-function-fast-bezier;
+
+        @include m('primary') { background-color: $color-primary; }
+        @include m('success') { background-color: $color-success; }
+        @include m('warning') { background-color: $color-warning; }
+        @include m('danger') { background-color: $color-danger; }
+        @include m('info') { background-color: $color-info; }
+    }
+
+    @include e('text') {
+        font-size: $font-size-small;
+        color: $color-text-secondary;
+        min-width: 36px;
+        text-align: right;
+        flex-shrink: 0;
+    }
+}
+
+.dark {
+    .#{$namespace}-progress {
+        .#{$namespace}-progress__track {
+            background-color: $bg-color-dark-lighter;
+        }
+
+        .#{$namespace}-progress__text {
+            color: $color-text-dark-secondary;
+        }
+    }
+}