corex

0.1.0-beta.5

0.1.2 0.1.1 0.1.0 0.1.0-rc.1 0.1.0-rc.0 0.1.0-beta.5 0.1.0-beta.4 0.1.0-beta.3 0.1.0-beta.2 0.1.0-beta.1 0.1.0-alpha.33 0.1.0-alpha.32 0.1.0-alpha.31 0.1.0-alpha.30 0.1.0-alpha.29 0.1.0-alpha.28 0.1.0-alpha.27 0.1.0-alpha.26 0.1.0-alpha.25 0.1.0-alpha.24 0.1.0-alpha.23 0.1.0-alpha.22 0.1.0-alpha.21 0.1.0-alpha.20 0.1.0-alpha.19 0.1.0-alpha.18 0.1.0-alpha.17 0.1.0-alpha.16 0.1.0-alpha.15 0.1.0-alpha.14 0.1.0-alpha.13 0.1.0-alpha.12 0.1.0-alpha.11 0.1.0-alpha.10 0.1.0-alpha.9 0.1.0-alpha.8 0.1.0-alpha.7 0.1.0-alpha.6 0.1.0-alpha.5 0.1.0-alpha.4 0.1.0-alpha.3 0.1.0-alpha.2 0.1.0-alpha.1

Accessible and unstyled UI components library written in Elixir and TypeScript that integrates Zag.js state machines into the Phoenix Framework.

HexDocs

Current section

Files

Jump to

Readme 43 Versions 4 Dependencies Dependants Files Activity

corex priv design corex components native-input.css

Raw

priv/design/corex/components/native-input.css

@import "../main.css";

@layer components {
  .native-input {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--container-5xl);
    gap: var(--spacing-space);
  }

  .native-input[data-loading] [data-scope="native-input"][data-part="root"] {
    @apply ui-loading;
  }

  .native-input [data-scope="native-input"][data-part="root"] {
    @apply ui-root;

    gap: --spacing(4);
    position: relative;
    padding-inline-end: var(--spacing-space);
  }

  .native-input [data-scope="native-input"][data-part="root"][data-readonly],
  .native-input [data-scope="native-input"][data-part="root"][data-read-only] {
    @apply ui-readonly;
  }

  .native-input [data-scope="native-input"][data-part="label"] {
    @apply ui-label;
  }

  .native-input [data-scope="native-input"][data-part="control"] {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    position: relative;
  }

  .native-input [data-scope="native-input"][data-part="input"] {
    @apply ui-input;
  }

  .native-input [data-scope="native-input"][data-part="icon"] {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: --spacing(11);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: --spacing(4);
    pointer-events: none;
  }

  .native-input [data-scope="native-input"][data-part="icon"] .icon,
  .native-input [data-scope="native-input"][data-part="icon"] svg {
    @apply ui-icon;
  }

  .native-input[data-no-icon] [data-scope="native-input"][data-part="input"] {
    padding-inline-start: --spacing(4);
  }

  .native-input:not([data-no-icon]) [data-scope="native-input"][data-part="input"] {
    padding-inline-start: --spacing(11);
  }

  .native-input [data-scope="native-input"][data-part="error"] {
    @apply ui-error;
  }

  .native-input [data-scope="native-input"][data-part="control"] label[data-part="label"] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-space);
    cursor: pointer;
  }

  .native-input [data-scope="native-input"][data-part="control"][data-has-items] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-space);
  }

  .native-input [data-scope="native-input"][data-part="item"] {
    display: flex;
    align-items: center;
    gap: var(--spacing-space);
  }

  .native-input [data-scope="native-input"][data-part="item"] label {
    cursor: pointer;
  }

  .native-input [data-scope="native-input"][data-part="control"]:has(select)::after {
    content: "▼";
    position: absolute;
    inset-block: 0;
    inset-inline-end: --spacing(4);
    display: flex;
    align-items: center;
    font-size: 0.75em;
    pointer-events: none;
    color: var(--color-ink);
  }

  .native-input select[data-scope="native-input"][data-part="input"] {
    width: 100%;
    padding-inline-end: --spacing(11);
    -webkit-appearance: none;
    appearance: none;
  }

  .native-input:not([data-no-icon]) select[data-scope="native-input"][data-part="input"] {
    padding-inline-start: --spacing(4);
  }

  .native-input input[type="color"][data-scope="native-input"][data-part="input"] {
    display: block;
    width: 100%;
    min-width: --spacing(11);
    height: --spacing(11);
    
    padding: 0;
    cursor: pointer;
  }

  .native-input input[type="checkbox"][data-scope="native-input"][data-part="input"] {
    appearance: none;
    width: --spacing(8);
    height: --spacing(8);
    min-width: --spacing(8);
    min-height: --spacing(8);
    margin: 0;
    padding: --spacing(4);
    background: var(--color-ui);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    flex: none;
  }

  .native-input input[type="checkbox"][data-scope="native-input"][data-part="input"]:checked {
    background: var(--color-ink);
    border-color: var(--color-ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .native-input input[type="checkbox"][data-scope="native-input"][data-part="input"]:hover {
    background-color: var(--color-ui-hover);
  }

  .native-input input[type="checkbox"][data-scope="native-input"][data-part="input"]:checked:hover {
    background-color: var(--color-ink);
    opacity: 0.9;
  }

  .native-input input[type="checkbox"][data-scope="native-input"][data-part="input"]:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-ink);
  }

  .native-input input[type="radio"][data-scope="native-input"][data-part="input"] {
    appearance: none;
    width: --spacing(8);
    height: --spacing(8);
    min-width: --spacing(8);
    min-height: --spacing(8);
    margin: 0;
    padding: --spacing(4);
    background: var(--color-ui);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    flex: none;
  }

  .native-input input[type="radio"][data-scope="native-input"][data-part="input"]:checked {
    background: var(--color-ink);
    border-color: var(--color-ink);
    background-image: radial-gradient(circle, var(--color-ui) 35%, transparent 40%);
  }

  .native-input input[type="radio"][data-scope="native-input"][data-part="input"]:hover {
    background-color: var(--color-ui-hover);
  }

  .native-input input[type="radio"][data-scope="native-input"][data-part="input"]:checked:hover {
    background-color: var(--color-ink);
    opacity: 0.9;
  }

  .native-input input[type="radio"][data-scope="native-input"][data-part="input"]:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-ink);
  }

  .native-input [data-scope="native-input"][data-part="date-wrapper"] {
    position: relative;
    flex: 1;
    display: flex;
    min-width: 0;
  }

  .native-input [data-scope="native-input"][data-part="date-wrapper"] input {
    flex: 1;
  }

  .native-input [data-scope="native-input"][data-part="placeholder-overlay"] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding-inline: --spacing(4);
    pointer-events: none;
    color: var(--color-ink);
  }

  .native-input [data-scope="native-input"][data-part="date-wrapper"]:focus-within [data-part="placeholder-overlay"] {
    visibility: hidden;
  }
}

Operator	Description	Example
name:	Match package name. Supports * wildcards and repo/package form	name:phx* or name:hexpm/phoenix
description:	Full-text search of package descriptions	description:auth
depends:	Packages depending on a given package. Supports repo:package form	depends:ecto or depends:hexpm:ecto
build_tool:	Filter by build tool	build_tool:mix
updated_after:	Packages updated after an ISO8601 datetime	updated_after:2025-01-01T00:00:00Z
extra:	Match custom metadata (key,value). Nested keys are separated by commas	extra:license,MIT