@sigx/zero-daisyui 0.2.0-beta.1

package/dist/lynx/components/checkbox.css

@@ -0,0 +1,163 @@
+.zx-checkbox__root {
+    --checkbox-pad: 0.25rem;
+    --checkbox-accent: var(--color-primary);
+    --checkbox-on-accent: var(--color-primary-content);
+}
+
+.zx-checkbox__root {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.625rem;
+    cursor: pointer;
+}
+
+.zx-checkbox__root.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+}
+
+.zx-checkbox__control {
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    padding: var(--checkbox-pad);
+    border-radius: var(--radius-selector);
+    color: var(--checkbox-on-accent);
+    box-shadow: 0 1px var(--depth-shade) inset, 0 0 #0000 inset, 0 0 #0000;
+    background-image: none, var(--fx-noise);
+    cursor: pointer;
+    transition: background-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
+}
+
+.zx-checkbox__control.zx-s-checked {
+    background-color: var(--checkbox-accent);
+    box-shadow: 0 0 #0000 inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
+}
+
+.zx-checkbox__control.zx-s-indeterminate {
+    background-color: var(--checkbox-accent);
+}
+
+.zx-checkbox__control.zx-f-focus-visible {
+    outline: 2px solid var(--checkbox-accent);
+    outline-offset: 2px;
+}
+
+.zx-checkbox__control.zx-f-invalid {
+    border-color: var(--color-error);
+}
+
+.zx-checkbox__indicator {
+    display: block;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    rotate: 45deg;
+    background-color: currentColor;
+    clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
+    box-shadow: 0 3px 0 0 var(--depth-sheen) inset;
+    font-size: 1rem;
+    line-height: 0.75;
+    transition: clip-path var(--duration-slow) var(--ease-standard) var(--duration-instant), opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), rotate var(--duration-slow) var(--ease-standard) var(--duration-instant), translate var(--duration-slow) var(--ease-standard) var(--duration-instant);
+}
+
+.zx-checkbox__indicator.zx-s-checked {
+    clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
+    opacity: 1;
+}
+
+.zx-checkbox__indicator.zx-s-indeterminate {
+    clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
+    opacity: 1;
+    translate: 0 -35%;
+    rotate: 0deg;
+}
+
+.zx-checkbox__label {
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+}
+
+.zx-checkbox__root.zx-a-color-primary {
+    --checkbox-accent: var(--color-primary);
+    --checkbox-on-accent: var(--color-primary-content);
+}
+
+.zx-checkbox__root.zx-a-color-secondary {
+    --checkbox-accent: var(--color-secondary);
+    --checkbox-on-accent: var(--color-secondary-content);
+}
+
+.zx-checkbox__root.zx-a-color-accent {
+    --checkbox-accent: var(--color-accent);
+    --checkbox-on-accent: var(--color-accent-content);
+}
+
+.zx-checkbox__root.zx-a-color-neutral {
+    --checkbox-accent: var(--color-neutral);
+    --checkbox-on-accent: var(--color-neutral-content);
+}
+
+.zx-checkbox__root.zx-a-color-info {
+    --checkbox-accent: var(--color-info);
+    --checkbox-on-accent: var(--color-info-content);
+}
+
+.zx-checkbox__root.zx-a-color-success {
+    --checkbox-accent: var(--color-success);
+    --checkbox-on-accent: var(--color-success-content);
+}
+
+.zx-checkbox__root.zx-a-color-warning {
+    --checkbox-accent: var(--color-warning);
+    --checkbox-on-accent: var(--color-warning-content);
+}
+
+.zx-checkbox__root.zx-a-color-error {
+    --checkbox-accent: var(--color-error);
+    --checkbox-on-accent: var(--color-error-content);
+}
+
+.zx-checkbox__root.zx-a-size-xs {
+    --checkbox-pad: 0.125rem;
+}
+
+.zx-checkbox__label.zx-a-size-xs {
+    font-size: var(--text-xs);
+}
+
+.zx-checkbox__root.zx-a-size-sm {
+    --checkbox-pad: 0.1875rem;
+}
+
+.zx-checkbox__label.zx-a-size-sm {
+    font-size: var(--text-sm);
+}
+
+.zx-checkbox__root.zx-a-size-md {
+    --checkbox-pad: 0.25rem;
+}
+
+.zx-checkbox__label.zx-a-size-md {
+    font-size: var(--text-sm);
+}
+
+.zx-checkbox__root.zx-a-size-lg {
+    --checkbox-pad: 0.3125rem;
+}
+
+.zx-checkbox__label.zx-a-size-lg {
+    font-size: var(--text-md);
+}
+
+.zx-checkbox__root.zx-a-size-xl {
+    --checkbox-pad: 0.375rem;
+}
+
+.zx-checkbox__label.zx-a-size-xl {
+    font-size: var(--text-lg);
+}

package/dist/lynx/components/collapsible.css

@@ -0,0 +1,79 @@
+.zx-collapsible__root {
+    --collapsible-accent: var(--color-base-content);
+}
+
+.zx-collapsible__root {
+    interpolate-size: allow-keywords;
+    border: var(--border) solid var(--color-base-300);
+    border-radius: var(--radius-box);
+    background: var(--color-base-100);
+    color: var(--color-base-content);
+    overflow: hidden;
+}
+
+.zx-collapsible__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-xl) var(--space-2xl);
+    font-size: var(--text-md);
+    font-weight: var(--weight-semibold);
+}
+
+.zx-collapsible__trigger.zx-s-open {
+    color: var(--collapsible-accent);
+}
+
+.zx-collapsible__trigger.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+}
+
+.zx-collapsible__trigger.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-collapsible__panel {
+    padding: 0 var(--space-2xl) var(--space-xl);
+    font-size: var(--text-md);
+}
+
+.zx-collapsible__trigger.zx-a-size-xs {
+    padding: var(--space-md) var(--space-lg);
+    font-size: var(--text-sm);
+}
+
+.zx-collapsible__panel.zx-a-size-xs {
+    padding: 0 var(--space-lg) var(--space-md);
+    font-size: var(--text-sm);
+}
+
+.zx-collapsible__trigger.zx-a-size-sm {
+    padding: var(--space-lg) var(--space-xl);
+    font-size: var(--text-sm);
+}
+
+.zx-collapsible__panel.zx-a-size-sm {
+    padding: 0 var(--space-xl) var(--space-lg);
+    font-size: var(--text-sm);
+}
+
+.zx-collapsible__trigger.zx-a-size-lg {
+    padding: var(--space-2xl) var(--space-2xl);
+    font-size: var(--text-lg);
+}
+
+.zx-collapsible__panel.zx-a-size-lg {
+    padding: 0 var(--space-2xl) var(--space-2xl);
+    font-size: var(--text-md);
+}
+
+.zx-collapsible__trigger.zx-a-size-xl {
+    padding: var(--space-2xl) var(--space-2xl);
+    font-size: var(--text-xl);
+}
+
+.zx-collapsible__panel.zx-a-size-xl {
+    padding: 0 var(--space-2xl) var(--space-2xl);
+    font-size: var(--text-lg);
+}

package/dist/lynx/components/combobox.css

@@ -0,0 +1,195 @@
+.zx-combobox__root {
+    --combobox-accent: var(--color-primary);
+}
+
+.zx-combobox__root {
+    display: inline-flex;
+    flex-direction: column;
+}
+
+.zx-combobox__control {
+    display: inline-flex;
+    align-items: stretch;
+    min-width: 13rem;
+    box-sizing: border-box;
+    background: var(--color-base-100);
+    border: var(--border) solid var(--color-base-300);
+    border-radius: var(--radius-field);
+    box-shadow: var(--shadow-xs);
+    transition: border-color var(--duration-fast) var(--ease-standard);
+}
+
+.zx-combobox__control.zx-s-open {
+    border-color: var(--combobox-accent);
+}
+
+.zx-combobox__control.zx-f-invalid {
+    border-color: var(--color-error);
+}
+
+.zx-combobox__control.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+}
+
+.zx-combobox__control.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-combobox__input {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0%;
+    min-width: 0;
+    appearance: none;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    padding: var(--space-sm) var(--space-lg);
+}
+
+.zx-combobox__input.zx-f-disabled {
+    cursor: not-allowed;
+}
+
+.zx-combobox__trigger {
+    appearance: none;
+    border: none;
+    background: transparent;
+    color: inherit;
+    opacity: 0.6;
+    padding: 0 var(--space-lg);
+    cursor: pointer;
+    transition: transform var(--duration-normal) var(--ease-standard);
+}
+
+.zx-combobox__trigger.zx-s-open {
+    transform: rotate(180deg);
+}
+
+.zx-combobox__trigger.zx-f-disabled {
+    cursor: not-allowed;
+}
+
+.zx-combobox__popup {
+    opacity: 0;
+    transform: translateY(-4px);
+    transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
+    background: var(--color-base-100);
+    color: var(--color-base-content);
+    border: var(--border) solid var(--color-base-300);
+    border-radius: var(--radius-box);
+    box-shadow: var(--shadow-lg);
+    padding: var(--space-md);
+    min-width: 13rem;
+}
+
+.zx-combobox__popup.zx-s-open {
+    opacity: 1;
+    transform: none;
+}
+
+.zx-combobox__group-label {
+    padding: var(--space-md) var(--space-lg) var(--space-xs);
+    font-size: var(--text-xs);
+    font-weight: var(--weight-bold);
+    opacity: 0.6;
+}
+
+.zx-combobox__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.625rem;
+    padding: var(--space-md) var(--space-lg);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    border-radius: var(--radius-field);
+    cursor: pointer;
+    transition: background var(--duration-fast) var(--ease-standard);
+}
+
+.zx-combobox__item.zx-f-highlighted {
+    background: var(--color-base-200);
+}
+
+.zx-combobox__item.zx-f-selected {
+    color: var(--combobox-accent);
+}
+
+.zx-combobox__item.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+}
+
+.zx-combobox__item-indicator {
+    font-size: var(--text-xs);
+}
+
+.zx-combobox__empty {
+    padding: var(--space-lg);
+    font-size: var(--text-sm);
+    text-align: center;
+    opacity: 0.6;
+}
+
+.zx-combobox__root.zx-a-color-primary {
+    --combobox-accent: var(--color-primary);
+}
+
+.zx-combobox__root.zx-a-color-secondary {
+    --combobox-accent: var(--color-secondary);
+}
+
+.zx-combobox__root.zx-a-color-accent {
+    --combobox-accent: var(--color-accent);
+}
+
+.zx-combobox__root.zx-a-color-neutral {
+    --combobox-accent: var(--color-neutral);
+}
+
+.zx-combobox__root.zx-a-color-info {
+    --combobox-accent: var(--color-info);
+}
+
+.zx-combobox__root.zx-a-color-success {
+    --combobox-accent: var(--color-success);
+}
+
+.zx-combobox__root.zx-a-color-warning {
+    --combobox-accent: var(--color-warning);
+}
+
+.zx-combobox__root.zx-a-color-error {
+    --combobox-accent: var(--color-error);
+}
+
+.zx-combobox__input.zx-a-size-xs {
+    padding: var(--space-2xs) var(--space-md);
+    font-size: var(--text-xs);
+}
+
+.zx-combobox__input.zx-a-size-sm {
+    padding: var(--space-xs) var(--space-md);
+    font-size: var(--text-sm);
+}
+
+.zx-combobox__input.zx-a-size-md {
+    padding: var(--space-sm) var(--space-lg);
+    font-size: var(--text-sm);
+}
+
+.zx-combobox__input.zx-a-size-lg {
+    padding: var(--space-md) var(--space-xl);
+    font-size: var(--text-md);
+}
+
+.zx-combobox__input.zx-a-size-xl {
+    padding: var(--space-lg) var(--space-2xl);
+    font-size: var(--text-lg);
+}

package/dist/lynx/components/countdown.css

@@ -0,0 +1,43 @@
+.zx-countdown__root {
+    --countdown-ink: var(--color-base-content);
+    --countdown-font: var(--text-2xl);
+}
+
+.zx-countdown__root {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.1em;
+    font-size: var(--countdown-font);
+    font-weight: var(--weight-semibold);
+    font-variant-numeric: tabular-nums;
+    color: var(--countdown-ink);
+}
+
+.zx-countdown__value {
+    display: inline-block;
+    overflow: hidden;
+}
+
+.zx-countdown__digits {
+    display: inline-block;
+    animation: zero-daisyui-countdown-in 0.35s var(--ease-standard);
+}
+
+.zx-countdown__root.zx-a-size-xs {
+    --countdown-font: var(--text-md);
+}
+
+.zx-countdown__root.zx-a-size-sm {
+    --countdown-font: var(--text-xl);
+}
+
+.zx-countdown__root.zx-a-size-lg {
+    --countdown-font: var(--text-3xl);
+}
+
+.zx-countdown__root.zx-a-size-xl {
+    --countdown-font: var(--text-3xl);
+}
+@keyframes zero-daisyui-countdown-in {
+    from { transform: translateY(0.6em); opacity: 0; }
+}

package/dist/lynx/components/dialog.css

@@ -0,0 +1,227 @@
+.zx-dialog__trigger {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    font-size: var(--text-sm);
+    font-weight: var(--weight-semibold);
+    color: var(--color-base-content);
+    background: var(--color-base-200);
+    border: var(--border) solid var(--color-base-300);
+    border-radius: var(--radius-field);
+    box-shadow: var(--shadow-xs);
+    cursor: pointer;
+    transition: background var(--duration-normal) var(--ease-standard);
+}
+
+.zx-dialog__trigger.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+}
+
+.zx-dialog__trigger.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-dialog__popup {
+    opacity: 0;
+    transform: translateY(8px) scale(0.97);
+    transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
+    padding: 1.5rem;
+    max-width: 32rem;
+    width: calc(100% - 2rem);
+    background: var(--color-base-100);
+    color: var(--color-base-content);
+    border: none;
+    border-radius: var(--radius-box);
+    box-shadow: var(--shadow-xl);
+}
+
+.zx-dialog__popup.zx-s-open {
+    opacity: 1;
+    transform: none;
+    animation: zero-daisy-pop var(--duration-normal) ease-out;
+}
+
+.zx-dialog__backdrop {
+    background: #00000066;
+}
+
+.zx-dialog__title {
+    margin: 0 0 var(--space-md);
+    font-size: var(--text-lg);
+    font-weight: var(--weight-bold);
+}
+
+.zx-dialog__description {
+    margin: 0 0 var(--space-2xl);
+    font-size: var(--text-sm);
+}
+
+.zx-dialog__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-md);
+    margin-block-start: 1.5rem;
+}
+
+.zx-dialog__close {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    font-size: var(--text-sm);
+    font-weight: var(--weight-semibold);
+    color: var(--color-base-content);
+    background: var(--color-base-200);
+    border: var(--border) solid var(--color-base-300);
+    border-radius: var(--radius-field);
+    box-shadow: var(--shadow-xs);
+    cursor: pointer;
+    transition: background var(--duration-normal) var(--ease-standard);
+}
+
+.zx-dialog__close.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+}
+
+.zx-dialog__close.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-dialog__cancel {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    font-size: var(--text-sm);
+    font-weight: var(--weight-semibold);
+    color: var(--color-base-content);
+    background: var(--color-base-200);
+    border: var(--border) solid var(--color-base-300);
+    border-radius: var(--radius-field);
+    box-shadow: var(--shadow-xs);
+    cursor: pointer;
+    transition: background var(--duration-normal) var(--ease-standard);
+}
+
+.zx-dialog__cancel.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+}
+
+.zx-dialog__cancel.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-dialog__trigger.zx-a-color-primary {
+    background: var(--color-primary);
+    color: var(--color-primary-content);
+    border-color: transparent;
+}
+
+.zx-dialog__trigger.zx-a-color-primary.zx-s-open {
+    background: var(--color-primary);
+    filter: brightness(0.92);
+}
+
+.zx-dialog__trigger.zx-a-color-secondary {
+    background: var(--color-secondary);
+    color: var(--color-secondary-content);
+    border-color: transparent;
+}
+
+.zx-dialog__trigger.zx-a-color-secondary.zx-s-open {
+    background: var(--color-secondary);
+    filter: brightness(0.92);
+}
+
+.zx-dialog__trigger.zx-a-color-accent {
+    background: var(--color-accent);
+    color: var(--color-accent-content);
+    border-color: transparent;
+}
+
+.zx-dialog__trigger.zx-a-color-accent.zx-s-open {
+    background: var(--color-accent);
+    filter: brightness(0.92);
+}
+
+.zx-dialog__trigger.zx-a-color-neutral {
+    background: var(--color-neutral);
+    color: var(--color-neutral-content);
+    border-color: transparent;
+}
+
+.zx-dialog__trigger.zx-a-color-neutral.zx-s-open {
+    background: var(--color-neutral);
+    filter: brightness(0.92);
+}
+
+.zx-dialog__trigger.zx-a-color-info {
+    background: var(--color-info);
+    color: var(--color-info-content);
+    border-color: transparent;
+}
+
+.zx-dialog__trigger.zx-a-color-info.zx-s-open {
+    background: var(--color-info);
+    filter: brightness(0.92);
+}
+
+.zx-dialog__trigger.zx-a-color-success {
+    background: var(--color-success);
+    color: var(--color-success-content);
+    border-color: transparent;
+}
+
+.zx-dialog__trigger.zx-a-color-success.zx-s-open {
+    background: var(--color-success);
+    filter: brightness(0.92);
+}
+
+.zx-dialog__trigger.zx-a-color-warning {
+    background: var(--color-warning);
+    color: var(--color-warning-content);
+    border-color: transparent;
+}
+
+.zx-dialog__trigger.zx-a-color-warning.zx-s-open {
+    background: var(--color-warning);
+    filter: brightness(0.92);
+}
+
+.zx-dialog__trigger.zx-a-color-error {
+    background: var(--color-error);
+    color: var(--color-error-content);
+    border-color: transparent;
+}
+
+.zx-dialog__trigger.zx-a-color-error.zx-s-open {
+    background: var(--color-error);
+    filter: brightness(0.92);
+}
+
+.zx-dialog__trigger.zx-a-size-xs {
+    font-size: var(--text-xs);
+}
+
+.zx-dialog__trigger.zx-a-size-sm {
+    font-size: var(--text-sm);
+}
+
+.zx-dialog__trigger.zx-a-size-lg {
+    font-size: var(--text-md);
+}
+
+.zx-dialog__trigger.zx-a-size-xl {
+    font-size: var(--text-lg);
+}
+@keyframes zero-daisy-pop {
+    from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); }
+}