@astryx-vue/core 0.1.1 → 0.1.3

package/styles/stepper.css

@@ -0,0 +1,357 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-stepper-root {
+    width: 100%;
+  }
+
+  .astryx-stepper-root[data-collapsed] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-stepper {
+    display: flex;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    gap: var(--astryx-spacing-0-5, 2px);
+  }
+
+  .astryx-stepper[data-orientation='horizontal'] {
+    gap: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-stepper[data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  .astryx-stepper[data-indicator-position='on-track'] {
+    gap: 0;
+  }
+
+  .astryx-stepper[data-collapsible='true'] {
+    container-type: inline-size;
+    container-name: astryx-stepper;
+  }
+
+  .astryx-step {
+    position: relative;
+    display: flex;
+    flex: 1 1 0;
+    min-width: 0;
+    color: var(--astryx-color-text-primary, #171717);
+    font-family: var(--astryx-font-family-body, Figtree, sans-serif);
+  }
+
+  .astryx-step[data-orientation='horizontal'] {
+    flex-direction: column;
+  }
+
+  .astryx-step[data-orientation='vertical'] {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-step[data-density='compact'] { --_step-space: var(--astryx-spacing-1, 4px); }
+  .astryx-step[data-density='balanced'] { --_step-space: var(--astryx-spacing-2, 8px); }
+  .astryx-step[data-density='spacious'] { --_step-space: var(--astryx-spacing-3, 12px); }
+
+  .astryx-step-bar,
+  .astryx-step-connector {
+    background: var(--astryx-color-border, #00000014);
+    border-radius: var(--astryx-radius-full, 999px);
+  }
+
+  .astryx-step-bar[data-filled],
+  .astryx-step-connector[data-filled] {
+    background: var(--astryx-color-accent, #0082fb);
+  }
+
+  .astryx-step[data-orientation='horizontal'] > .astryx-step-bar {
+    height: var(--astryx-spacing-1, 4px);
+    width: 100%;
+    margin-block-end: var(--astryx-spacing-0-5, 2px);
+    border-radius: 9999px;
+  }
+
+  .astryx-step[data-orientation='vertical'] > .astryx-step-bar {
+    width: var(--astryx-spacing-1, 4px);
+    align-self: stretch;
+    min-height: var(--astryx-spacing-4, 16px);
+    border-radius: var(--astryx-radius-full, 999px);
+  }
+
+  .astryx-step-rail {
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+
+  .astryx-step[data-orientation='horizontal'][data-indicator-position='on-track'] > .astryx-step-rail {
+    height: var(--astryx-spacing-1, 4px);
+    margin-block: calc(var(--astryx-spacing-5, 20px) / 2 - 2px) var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-step[data-orientation='vertical'][data-indicator-position='on-track'] {
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-step[data-orientation='vertical'][data-indicator-position='on-track'] > .astryx-step-rail {
+    flex-direction: column;
+    align-self: stretch;
+    width: 16px;
+  }
+
+  .astryx-step-connector {
+    flex: 1 1 auto;
+    min-width: var(--astryx-spacing-2, 8px);
+    border-radius: 0;
+  }
+
+  .astryx-step[data-orientation='horizontal'] .astryx-step-connector {
+    height: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-step[data-orientation='vertical'] .astryx-step-connector {
+    width: var(--astryx-spacing-1, 4px);
+    min-height: var(--astryx-spacing-2, 8px);
+    min-width: 0;
+  }
+
+  .astryx-step:first-child .astryx-step-connector-lead,
+  .astryx-step:last-child .astryx-step-connector-trail {
+    visibility: hidden;
+  }
+
+  .astryx-step-control {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--astryx-spacing-2, 8px);
+    width: 100%;
+    margin: 0;
+    padding-block: var(--_step-space);
+    padding-inline: var(--_step-space);
+    border: 0;
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+  }
+
+  button.astryx-step-control {
+    cursor: pointer;
+    transition: background-color var(--astryx-duration-fast-min, 80ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  @media (hover: hover) {
+    button.astryx-step-control:hover {
+      background: var(--astryx-color-overlay-hover, light-dark(#0536590c, #ffffff0c));
+    }
+  }
+
+  button.astryx-step-control:active {
+    background: var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19));
+  }
+
+  button.astryx-step-control:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) solid var(--astryx-focus-outline-color, var(--astryx-color-text-primary, #171717));
+    outline-offset: 2px;
+  }
+
+  .astryx-step-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    border-radius: 9999px;
+    background: transparent;
+    color: var(--astryx-color-text-primary, #171717);
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  .astryx-step-indicator svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .astryx-step-indicator[data-glyph='number'] {
+    background: var(--astryx-color-accent-muted, #f1f1f1);
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
+  .astryx-step[data-progress='completed'] .astryx-step-indicator[data-glyph='number'],
+  .astryx-step[data-progress='in-progress'] .astryx-step-indicator[data-glyph='number'] {
+    background: var(--astryx-color-accent, #262626);
+    color: var(--astryx-color-background-surface, #fff);
+  }
+
+  .astryx-step[data-status='accent'] .astryx-step-indicator {
+    color: var(--astryx-color-accent, #262626);
+  }
+
+  .astryx-step[data-status='success'] .astryx-step-indicator {
+    background: transparent;
+    color: var(--astryx-color-success, #16a34a);
+  }
+
+  .astryx-step[data-status='warning'] .astryx-step-indicator {
+    background: transparent;
+    color: var(--astryx-color-warning, #ca8a04);
+  }
+
+  .astryx-step[data-status='error'] .astryx-step-indicator {
+    background: transparent;
+    color: var(--astryx-color-error, #dc2626);
+  }
+
+  .astryx-step[data-progress='not-started'] .astryx-step-label,
+  .astryx-step[data-progress='completed'] .astryx-step-label {
+    font-weight: var(--astryx-font-weight-regular, 400);
+  }
+
+  .astryx-step[data-progress='in-progress'] .astryx-step-label {
+    font-weight: var(--astryx-font-weight-semibold, 600);
+  }
+
+  .astryx-step-copy {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    gap: var(--astryx-spacing-0-5, 2px);
+  }
+
+  .astryx-step-label-row {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    min-width: 0;
+  }
+
+  .astryx-step-label,
+  .astryx-step-description,
+  .astryx-step-optional {
+    font-size: var(--astryx-text-body-size, 0.875rem);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+  }
+
+  .astryx-step-description,
+  .astryx-step-optional {
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    line-height: 16px;
+  }
+
+  .astryx-step-content {
+    padding-block-start: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-step[data-orientation='horizontal'][data-indicator-position='separated'] .astryx-step-control {
+    align-items: center;
+  }
+
+  .astryx-step[data-orientation='horizontal'][data-indicator-position='on-track'] .astryx-step-control {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .astryx-step[data-orientation='horizontal'][data-indicator-position='on-track'] .astryx-step-indicator {
+    margin-block-start: -10px;
+  }
+
+  .astryx-stepper-root[data-collapsed] .astryx-stepper {
+    width: auto;
+    justify-content: center;
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-stepper-root[data-collapsed] .astryx-step {
+    flex: 0 0 32px;
+    width: 32px;
+    min-width: 32px;
+  }
+
+  .astryx-stepper-root[data-collapsed] .astryx-step-control,
+  .astryx-stepper-root[data-collapsed] .astryx-step-content,
+  .astryx-stepper-root[data-collapsed] .astryx-step-rail {
+    display: none;
+  }
+
+  .astryx-stepper-root[data-collapsed] .astryx-step-bar {
+    margin-block-end: 0;
+  }
+
+  .astryx-stepper-summary {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--astryx-spacing-3, 12px);
+    min-width: 0;
+  }
+
+  .astryx-stepper-summary-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--astryx-spacing-0-5, 2px);
+    min-width: 0;
+  }
+
+  .astryx-stepper-summary-row {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-stepper-summary .astryx-step-label {
+    color: var(--astryx-color-text-primary, #171717);
+    font-weight: 600;
+  }
+
+  .astryx-stepper-nav {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: transparent;
+    color: var(--astryx-color-text-primary, #171717);
+    cursor: pointer;
+  }
+
+  .astryx-stepper-nav svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .astryx-stepper-nav:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  @container astryx-stepper (max-width: 480px) {
+    .astryx-stepper[data-collapsible='true'][data-orientation='horizontal'] .astryx-step:not([data-progress='in-progress']) .astryx-step-copy {
+      display: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    button.astryx-step-control {
+      transition-duration: 0s;
+    }
+  }
+}

package/styles/tab-menu.css

@@ -0,0 +1,91 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-tab-menu {
+    gap: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-tab-menu-chevron {
+    width: var(--astryx-spacing-4, 16px);
+    height: var(--astryx-spacing-4, 16px);
+    transition: transform var(--astryx-duration-fast, 130ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-tab-menu-chevron[data-state='expanded'] {
+    transform: rotate(180deg);
+  }
+
+  .astryx-tab-menu-dropdown {
+    position: fixed;
+    z-index: 50;
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-0-5, 2px);
+    min-width: 180px;
+    margin: 0;
+    padding-block: var(--astryx-spacing-1, 4px);
+    padding-inline: var(--astryx-spacing-1, 4px);
+    border: 0;
+    border-radius: var(--astryx-radius-container, 0.75rem);
+    background: var(--astryx-color-background-surface, #fff);
+    box-shadow: var(--astryx-shadow-high, 0 8px 24px rgb(0 0 0 / 16%));
+    color: var(--astryx-color-text-primary, #171717);
+  }
+
+  .astryx-tab-menu-heading {
+    padding-block: var(--astryx-spacing-1, 4px);
+    padding-inline: var(--astryx-spacing-3, 12px);
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    font-weight: var(--astryx-font-weight-semibold, 600);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+  }
+
+  .astryx-tab-menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--astryx-spacing-2, 8px);
+    padding-block: var(--astryx-spacing-2, 8px);
+    padding-inline: var(--astryx-spacing-3, 12px);
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    color: var(--astryx-color-text-primary, #171717);
+    font-size: var(--astryx-text-label-size, 0.875rem);
+    line-height: var(--astryx-text-label-leading, 1.4286);
+    cursor: pointer;
+  }
+
+  .astryx-tab-menu-item[data-selected='true'] {
+    font-weight: var(--astryx-font-weight-medium, 500);
+  }
+
+  @media (hover: hover) {
+    .astryx-tab-menu-item:hover {
+      background: var(--astryx-color-overlay-hover, light-dark(#0536590c, #ffffff0c));
+    }
+  }
+
+  .astryx-tab-menu-item:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) solid var(--astryx-focus-outline-color, var(--astryx-color-text-primary, #171717));
+    outline-offset: -2px;
+  }
+
+  .astryx-tab-menu-item-label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    min-width: 0;
+  }
+
+  .astryx-tab-menu-icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-tab-menu-chevron {
+      transition: none;
+    }
+  }
+}

package/styles.css

@@ -1,5 +1,7 @@
 /* 这个文件由 `pnpm sync` 生成，不要手改。 */
 @import './styles/alert-dialog.css';
+@import './styles/app-shell.css';
+@import './styles/aspect-ratio.css';
 @import './styles/avatar.css';
 @import './styles/avatar-group.css';
 @import './styles/badge.css';
@@ -17,8 +19,11 @@
 @import './styles/checkbox-input.css';
 @import './styles/checkbox-list.css';
 @import './styles/citation.css';
+@import './styles/clickable-card.css';
 @import './styles/code.css';
 @import './styles/collapsible.css';
+@import './styles/command-palette.css';
+@import './styles/complex-selector.css';
 @import './styles/context-menu.css';
 @import './styles/date-range-input.css';
 @import './styles/date-time-input.css';
@@ -29,11 +34,13 @@
 @import './styles/empty-state.css';
 @import './styles/field.css';
 @import './styles/file-input.css';
+@import './styles/form-layout.css';
 @import './styles/grid.css';
 @import './styles/heading.css';
 @import './styles/hover-card.css';
 @import './styles/icon.css';
 @import './styles/kbd.css';
+@import './styles/layout.css';
 @import './styles/link.css';
 @import './styles/list.css';
 @import './styles/markdown.css';
@@ -49,6 +56,9 @@
 @import './styles/popover.css';
 @import './styles/progress-bar.css';
 @import './styles/radio.css';
+@import './styles/resize-handle.css';
+@import './styles/scrollable-area.css';
+@import './styles/section.css';
 @import './styles/segmented-control.css';
 @import './styles/side-nav.css';
 @import './styles/skeleton.css';
@@ -56,8 +66,10 @@
 @import './styles/spinner.css';
 @import './styles/stack.css';
 @import './styles/status-dot.css';
+@import './styles/stepper.css';
 @import './styles/switch.css';
 @import './styles/tab-list.css';
+@import './styles/tab-menu.css';
 @import './styles/table.css';
 @import './styles/text.css';
 @import './styles/text-area.css';

package/dist/Collapsible-BYg9soTk.js

@@ -1,102 +0,0 @@
-import { t as _sfc_main$1 } from "./Icon-5MdZQ18k.js";
-import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, openBlock, renderSlot, shallowRef, toDisplayString, useId, useModel, useTemplateRef, vShow, withCtx, withDirectives } from "vue";
-import "../styles/collapsible.css";
-//#region src/Collapsible/Collapsible.vue
-const _hoisted_1 = [
-	"data-chevron-position",
-	"data-open",
-	"data-disabled",
-	"aria-expanded",
-	"aria-disabled",
-	"tabindex"
-];
-const _hoisted_2 = { class: "astryx-collapsible-trigger-label" };
-const _hoisted_3 = ["data-open"];
-const _hoisted_4 = { class: "astryx-collapsible-content-inner" };
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	name: "AstryxCollapsible",
-	__name: "Collapsible",
-	props: /*@__PURE__*/ mergeModels({
-		trigger: {},
-		defaultIsOpen: {
-			type: Boolean,
-			default: true
-		},
-		isDisabled: {
-			type: Boolean,
-			default: false
-		},
-		chevronPosition: { default: "end" }
-	}, {
-		"isOpen": {
-			type: Boolean,
-			default: void 0
-		},
-		"isOpenModifiers": {}
-	}),
-	emits: /*@__PURE__*/ mergeModels(["openChange"], ["update:isOpen"]),
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const open = useModel(__props, "isOpen");
-		const localIsOpen = shallowRef(props.defaultIsOpen);
-		const isOpen = computed(() => open.value ?? localIsOpen.value);
-		const isChevronAtStart = computed(() => props.chevronPosition === "start");
-		const contentId = `astryx-collapsible-${useId()}`;
-		const root = useTemplateRef("root");
-		__expose({ element: computed(() => root.value ?? null) });
-		function toggle() {
-			if (props.isDisabled) return;
-			const next = !isOpen.value;
-			localIsOpen.value = next;
-			open.value = next;
-			emit("openChange", next);
-		}
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				ref_key: "root",
-				ref: root,
-				class: "astryx-collapsible"
-			}, [createElementVNode("button", {
-				type: "button",
-				class: "astryx-collapsible-trigger",
-				"data-chevron-position": __props.chevronPosition,
-				"data-open": isOpen.value ? "open" : void 0,
-				"data-disabled": __props.isDisabled ? "disabled" : void 0,
-				"aria-expanded": isOpen.value,
-				"aria-controls": contentId,
-				"aria-disabled": __props.isDisabled || void 0,
-				tabindex: __props.isDisabled ? -1 : void 0,
-				onClick: toggle
-			}, [
-				isChevronAtStart.value ? (openBlock(), createBlock(_sfc_main$1, {
-					key: 0,
-					class: "astryx-collapsible-chevron",
-					color: "secondary",
-					icon: "chevronRight",
-					size: "sm"
-				})) : createCommentVNode("v-if", true),
-				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "trigger", {}, () => [createTextVNode(toDisplayString(__props.trigger), 1)])]),
-				!isChevronAtStart.value ? (openBlock(), createBlock(_sfc_main$1, {
-					key: 1,
-					class: "astryx-collapsible-chevron",
-					color: "secondary",
-					icon: "chevronDown",
-					size: "sm"
-				})) : createCommentVNode("v-if", true)
-			], 8, _hoisted_1), createVNode(Transition, {
-				name: "astryx-collapsible-reveal",
-				persisted: ""
-			}, {
-				default: withCtx(() => [withDirectives(createElementVNode("div", {
-					id: contentId,
-					class: "astryx-collapsible-content",
-					"data-open": isOpen.value ? "open" : void 0
-				}, [createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")])], 8, _hoisted_3), [[vShow, isOpen.value]])]),
-				_: 3
-			})], 512);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };