@sigx/zero-daisyui 0.2.0-beta.1

package/dist/lynx/components/badge.css

@@ -0,0 +1,80 @@
+.zx-badge__root {
+    --badge-fill: var(--color-base-200);
+    --badge-ink: var(--color-base-content);
+}
+
+.zx-badge__root {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375em;
+    background: var(--badge-fill);
+    color: var(--badge-ink);
+    border: var(--border) solid transparent;
+    border-radius: var(--radius-selector);
+    padding: 0.125rem 0.625rem;
+    font-size: var(--text-xs);
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-normal);
+    white-space: nowrap;
+    text-decoration: none;
+}
+
+.zx-badge__root.zx-a-color-primary {
+    --badge-fill: var(--color-primary);
+    --badge-ink: var(--color-primary-content);
+}
+
+.zx-badge__root.zx-a-color-secondary {
+    --badge-fill: var(--color-secondary);
+    --badge-ink: var(--color-secondary-content);
+}
+
+.zx-badge__root.zx-a-color-accent {
+    --badge-fill: var(--color-accent);
+    --badge-ink: var(--color-accent-content);
+}
+
+.zx-badge__root.zx-a-color-neutral {
+    --badge-fill: var(--color-neutral);
+    --badge-ink: var(--color-neutral-content);
+}
+
+.zx-badge__root.zx-a-color-info {
+    --badge-fill: var(--color-info);
+    --badge-ink: var(--color-info-content);
+}
+
+.zx-badge__root.zx-a-color-success {
+    --badge-fill: var(--color-success);
+    --badge-ink: var(--color-success-content);
+}
+
+.zx-badge__root.zx-a-color-warning {
+    --badge-fill: var(--color-warning);
+    --badge-ink: var(--color-warning-content);
+}
+
+.zx-badge__root.zx-a-color-error {
+    --badge-fill: var(--color-error);
+    --badge-ink: var(--color-error-content);
+}
+
+.zx-badge__root.zx-a-size-xs {
+    font-size: var(--text-xs);
+    padding: 0 var(--space-sm);
+}
+
+.zx-badge__root.zx-a-size-sm {
+    font-size: var(--text-xs);
+    padding: 0 var(--space-md);
+}
+
+.zx-badge__root.zx-a-size-lg {
+    font-size: var(--text-sm);
+    padding: var(--space-2xs) var(--space-lg);
+}
+
+.zx-badge__root.zx-a-size-xl {
+    font-size: var(--text-md);
+    padding: var(--space-xs) var(--space-xl);
+}

package/dist/lynx/components/breadcrumbs.css

@@ -0,0 +1,61 @@
+.zx-breadcrumbs__root {
+    --bc-accent: var(--color-base-content);
+}
+
+.zx-breadcrumbs__root {
+    font-size: var(--text-sm);
+    color: var(--color-base-content);
+}
+
+.zx-breadcrumbs__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-xs);
+    list-style: none;
+    margin: 0;
+    padding: var(--space-xs) 0;
+}
+
+.zx-breadcrumbs__item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+}
+
+.zx-breadcrumbs__link {
+    text-decoration: none;
+    border-radius: var(--radius-selector);
+    transition: color var(--duration-fast) var(--ease-standard);
+}
+
+.zx-breadcrumbs__link.zx-s-active {
+    color: var(--bc-accent);
+    font-weight: var(--weight-semibold);
+    text-decoration: none;
+}
+
+.zx-breadcrumbs__link.zx-f-focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+.zx-breadcrumbs__separator {
+    user-select: none;
+}
+
+.zx-breadcrumbs__root.zx-a-size-xs {
+    font-size: var(--text-xs);
+}
+
+.zx-breadcrumbs__root.zx-a-size-sm {
+    font-size: var(--text-xs);
+}
+
+.zx-breadcrumbs__root.zx-a-size-lg {
+    font-size: var(--text-md);
+}
+
+.zx-breadcrumbs__root.zx-a-size-xl {
+    font-size: var(--text-lg);
+}

package/dist/lynx/components/button.css

@@ -0,0 +1,173 @@
+.zx-button__root {
+    --btn-accent: var(--color-primary);
+    --btn-on-accent: var(--color-primary-content);
+    --btn-soft: var(--color-primary-soft);
+}
+
+.zx-button__root {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    border: var(--border) solid transparent;
+    border-radius: var(--radius-field);
+    box-shadow: var(--shadow-xs);
+    font-family: inherit;
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-none);
+    cursor: pointer;
+    transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
+}
+
+.zx-button__root.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+}
+
+.zx-button__root.zx-f-focus-visible {
+    outline: 2px solid var(--btn-ink);
+    outline-offset: 2px;
+}
+
+.zx-button__root.zx-a-color-primary {
+    --btn-accent: var(--color-primary);
+    --btn-on-accent: var(--color-primary-content);
+    --btn-soft: var(--color-primary-soft);
+}
+
+.zx-button__root.zx-a-color-secondary {
+    --btn-accent: var(--color-secondary);
+    --btn-on-accent: var(--color-secondary-content);
+    --btn-soft: var(--color-secondary-soft);
+}
+
+.zx-button__root.zx-a-color-accent {
+    --btn-accent: var(--color-accent);
+    --btn-on-accent: var(--color-accent-content);
+    --btn-soft: var(--color-accent-soft);
+}
+
+.zx-button__root.zx-a-color-neutral {
+    --btn-accent: var(--color-neutral);
+    --btn-on-accent: var(--color-neutral-content);
+    --btn-soft: var(--color-neutral-soft);
+}
+
+.zx-button__root.zx-a-color-info {
+    --btn-accent: var(--color-info);
+    --btn-on-accent: var(--color-info-content);
+    --btn-soft: var(--color-info-soft);
+}
+
+.zx-button__root.zx-a-color-success {
+    --btn-accent: var(--color-success);
+    --btn-on-accent: var(--color-success-content);
+    --btn-soft: var(--color-success-soft);
+}
+
+.zx-button__root.zx-a-color-warning {
+    --btn-accent: var(--color-warning);
+    --btn-on-accent: var(--color-warning-content);
+    --btn-soft: var(--color-warning-soft);
+}
+
+.zx-button__root.zx-a-color-error {
+    --btn-accent: var(--color-error);
+    --btn-on-accent: var(--color-error-content);
+    --btn-soft: var(--color-error-soft);
+}
+
+.zx-button__root.zx-a-variant-solid {
+    background: var(--btn-accent);
+    color: var(--btn-on-accent);
+}
+
+.zx-button__root.zx-a-variant-outline {
+    background: transparent;
+    color: var(--btn-ink);
+    border-color: var(--btn-ink);
+}
+
+.zx-button__root.zx-a-variant-soft {
+    background: var(--btn-soft);
+    color: var(--btn-ink);
+}
+
+.zx-button__root.zx-a-variant-ghost {
+    background: transparent;
+    color: var(--btn-ink);
+}
+
+.zx-button__root.zx-a-variant-dash {
+    background: transparent;
+    color: var(--btn-ink);
+    border-color: var(--btn-ink);
+    border-style: dashed;
+}
+
+.zx-button__root.zx-a-variant-link {
+    background: transparent;
+    color: var(--btn-ink);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    box-shadow: none;
+}
+
+.zx-button__root.zx-a-size-xs {
+    padding: var(--space-2xs) var(--space-xs);
+    font-size: var(--text-xs);
+}
+
+.zx-button__root.zx-a-size-sm {
+    padding: var(--space-xs) var(--space-sm);
+    font-size: var(--text-sm);
+}
+
+.zx-button__root.zx-a-size-md {
+    padding: var(--space-sm) var(--space-lg);
+    font-size: var(--text-md);
+}
+
+.zx-button__root.zx-a-size-lg {
+    padding: var(--space-md) var(--space-xl);
+    font-size: var(--text-lg);
+}
+
+.zx-button__root.zx-a-size-xl {
+    padding: var(--space-lg) var(--space-2xl);
+    font-size: var(--text-xl);
+}
+
+.zx-button__root.zx-m-wide {
+    inline-size: 100%;
+    max-inline-size: 16rem;
+}
+
+.zx-button__root.zx-m-block {
+    inline-size: 100%;
+}
+
+.zx-button__root.zx-m-square {
+    padding-inline: 0;
+    aspect-ratio: 1;
+}
+
+.zx-button__root.zx-m-circle {
+    padding-inline: 0;
+    aspect-ratio: 1;
+    border-radius: 9999px;
+}
+
+.zx-button__root.zx-m-active {
+    transform: translateY(1px);
+    box-shadow: none;
+    filter: brightness(0.92);
+}
+
+.zx-button__root.zx-m-loading {
+    cursor: progress;
+}
+@keyframes zero-daisyui-btn-spin {
+    to { transform: rotate(360deg) }
+}

package/dist/lynx/components/card.css

@@ -0,0 +1,62 @@
+.zx-card__root {
+    --card-pad: var(--space-xl);
+}
+
+.zx-card__root {
+    display: flex;
+    flex-direction: column;
+    background: var(--color-base-100);
+    color: var(--color-base-content);
+    border-radius: var(--radius-box);
+    box-shadow: var(--shadow-md);
+    overflow: hidden;
+}
+
+.zx-card__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xs);
+    padding: var(--card-pad) var(--card-pad) 0;
+}
+
+.zx-card__title {
+    margin: 0;
+    font-size: var(--text-lg);
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-tight);
+}
+
+.zx-card__description {
+    margin: 0;
+    font-size: var(--text-sm);
+}
+
+.zx-card__body {
+    padding: var(--card-pad);
+    font-size: var(--text-sm);
+    line-height: var(--leading-normal);
+}
+
+.zx-card__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-md);
+    padding: 0 var(--card-pad) var(--card-pad);
+}
+
+.zx-card__root.zx-a-size-xs {
+    --card-pad: var(--space-sm);
+}
+
+.zx-card__root.zx-a-size-sm {
+    --card-pad: var(--space-md);
+}
+
+.zx-card__root.zx-a-size-lg {
+    --card-pad: var(--space-2xl);
+}
+
+.zx-card__root.zx-a-size-xl {
+    --card-pad: var(--space-2xl);
+}

package/dist/lynx/components/carousel.css

@@ -0,0 +1,124 @@
+.zx-carousel__root {
+    --carousel-accent: var(--color-base-content);
+    --carousel-dot: 0.625rem;
+    --carousel-nav: 2rem;
+}
+
+.zx-carousel__root {
+    position: relative;
+    display: grid;
+    gap: var(--space-sm);
+}
+
+.zx-carousel__viewport {
+    display: flex;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    overscroll-behavior-x: contain;
+    border-radius: var(--radius-box);
+}
+
+.zx-carousel__item {
+    flex: 0 0 100%;
+    min-width: 0;
+    scroll-snap-align: center;
+}
+
+.zx-carousel__prev-trigger {
+    appearance: none;
+    position: absolute;
+    inset-inline-start: var(--space-sm);
+    inline-size: var(--carousel-nav);
+    block-size: var(--carousel-nav);
+    display: grid;
+    place-items: center;
+    font-size: var(--text-sm);
+    line-height: var(--leading-none);
+    color: var(--color-base-content);
+    background: var(--color-base-200);
+    border: var(--border) solid var(--color-base-300);
+    border-radius: 9999px;
+    cursor: pointer;
+    z-index: 1;
+}
+
+.zx-carousel__prev-trigger.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+}
+
+.zx-carousel__prev-trigger.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-carousel__next-trigger {
+    appearance: none;
+    position: absolute;
+    inset-inline-end: var(--space-sm);
+    inline-size: var(--carousel-nav);
+    block-size: var(--carousel-nav);
+    display: grid;
+    place-items: center;
+    font-size: var(--text-sm);
+    line-height: var(--leading-none);
+    color: var(--color-base-content);
+    background: var(--color-base-200);
+    border: var(--border) solid var(--color-base-300);
+    border-radius: 9999px;
+    cursor: pointer;
+    z-index: 1;
+}
+
+.zx-carousel__next-trigger.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+}
+
+.zx-carousel__next-trigger.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-carousel__indicator-group {
+    display: flex;
+    gap: var(--space-xs);
+    justify-content: center;
+}
+
+.zx-carousel__indicator {
+    appearance: none;
+    inline-size: max(var(--carousel-dot), 1.5rem);
+    block-size: max(var(--carousel-dot), 1.5rem);
+    padding: 0;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+}
+
+.zx-carousel__indicator.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-carousel__root.zx-a-size-xs {
+    --carousel-dot: 0.375rem;
+    --carousel-nav: 1.5rem;
+}
+
+.zx-carousel__root.zx-a-size-sm {
+    --carousel-dot: 0.5rem;
+    --carousel-nav: 1.75rem;
+}
+
+.zx-carousel__root.zx-a-size-lg {
+    --carousel-dot: 0.75rem;
+    --carousel-nav: 2.5rem;
+}
+
+.zx-carousel__root.zx-a-size-xl {
+    --carousel-dot: 0.875rem;
+    --carousel-nav: 3rem;
+}

package/dist/lynx/components/chat.css

@@ -0,0 +1,105 @@
+.zx-chat__root {
+    --chat-fill: var(--color-base-200);
+    --chat-ink: var(--color-base-content);
+}
+
+.zx-chat__root {
+    display: grid;
+    column-gap: var(--space-sm);
+    row-gap: var(--space-2xs);
+    padding-block: var(--space-2xs);
+}
+
+.zx-chat__root.zx-p-start {
+    grid-template-columns: auto minmax(0, 1fr);
+    justify-items: start;
+}
+
+.zx-chat__root.zx-p-end {
+    grid-template-columns: minmax(0, 1fr) auto;
+    justify-items: end;
+}
+
+.zx-chat__avatar {
+    grid-row: 1 / span 3;
+    align-self: end;
+    display: flex;
+    align-items: center;
+}
+
+.zx-chat__header {
+    font-size: var(--text-xs);
+}
+
+.zx-chat__bubble {
+    max-inline-size: 90%;
+    padding: var(--space-xs) var(--space-lg);
+    font-size: var(--text-sm);
+    background: var(--chat-fill);
+    color: var(--chat-ink);
+    border-radius: var(--radius-box);
+}
+
+.zx-chat__footer {
+    font-size: var(--text-xs);
+}
+
+.zx-chat__bubble.zx-a-color-primary {
+    --chat-fill: var(--color-primary);
+    --chat-ink: var(--color-primary-content);
+}
+
+.zx-chat__bubble.zx-a-color-secondary {
+    --chat-fill: var(--color-secondary);
+    --chat-ink: var(--color-secondary-content);
+}
+
+.zx-chat__bubble.zx-a-color-accent {
+    --chat-fill: var(--color-accent);
+    --chat-ink: var(--color-accent-content);
+}
+
+.zx-chat__bubble.zx-a-color-neutral {
+    --chat-fill: var(--color-neutral);
+    --chat-ink: var(--color-neutral-content);
+}
+
+.zx-chat__bubble.zx-a-color-info {
+    --chat-fill: var(--color-info);
+    --chat-ink: var(--color-info-content);
+}
+
+.zx-chat__bubble.zx-a-color-success {
+    --chat-fill: var(--color-success);
+    --chat-ink: var(--color-success-content);
+}
+
+.zx-chat__bubble.zx-a-color-warning {
+    --chat-fill: var(--color-warning);
+    --chat-ink: var(--color-warning-content);
+}
+
+.zx-chat__bubble.zx-a-color-error {
+    --chat-fill: var(--color-error);
+    --chat-ink: var(--color-error-content);
+}
+
+.zx-chat__bubble.zx-a-size-xs {
+    font-size: var(--text-xs);
+    padding: var(--space-2xs) var(--space-sm);
+}
+
+.zx-chat__bubble.zx-a-size-sm {
+    font-size: var(--text-xs);
+    padding: var(--space-xs) var(--space-md);
+}
+
+.zx-chat__bubble.zx-a-size-lg {
+    font-size: var(--text-md);
+    padding: var(--space-md) var(--space-lg);
+}
+
+.zx-chat__bubble.zx-a-size-xl {
+    font-size: var(--text-lg);
+    padding: var(--space-md) var(--space-xl);
+}