PhiaUi.ResponsiveHelpers (phia_ui v0.1.17)

Shared helpers for converting per-breakpoint responsive maps into Tailwind CSS class strings.

All layout attributes in PhiaUI accept either a plain value (backward compatible) or a responsive map like %{base: :col, md: :row}. This module provides the conversion from those maps to prefixed Tailwind classes.

Responsive Map Convention

A responsive map can contain any combination of these keys:

:base — no breakpoint prefix (mobile-first default)
:sm — sm: breakpoint (≥640px)
:md — md: breakpoint (≥768px)
:lg — lg: breakpoint (≥1024px)
:xl — xl: breakpoint (≥1280px)
:"2xl" — 2xl: breakpoint (≥1536px)

Examples

iex> PhiaUi.ResponsiveHelpers.resolve_responsive(:row, &"flex-#{&1}")
["flex-row"]

iex> PhiaUi.ResponsiveHelpers.resolve_responsive(%{base: :col, md: :row}, &"flex-#{&1}")
["flex-col", "md:flex-row"]

iex> PhiaUi.ResponsiveHelpers.resolve_responsive(nil, &"flex-#{&1}")
[nil]

Summary

Functions

container_classes(bp_map, mapper)

Converts a responsive breakpoint map into container query classes (@sm:, @md:, etc).

resolve_responsive(value, mapper)

Resolves a value or responsive map into a list of Tailwind classes.

responsive_classes(bp_map, mapper)

Converts a responsive breakpoint map into a list of prefixed Tailwind classes.

Functions

container_classes(bp_map, mapper)

@spec container_classes(map(), (any() -> String.t() | nil)) :: [String.t() | nil]

Converts a responsive breakpoint map into container query classes (@sm:, @md:, etc).

Examples

iex> PhiaUi.ResponsiveHelpers.container_classes(%{base: 1, md: 2}, &"grid-cols-#{&1}")
["grid-cols-1", "@md:grid-cols-2"]

resolve_responsive(value, mapper)

@spec resolve_responsive(any(), (any() -> String.t() | nil)) :: [String.t() | nil]

Resolves a value or responsive map into a list of Tailwind classes.

The mapper function receives a plain value and returns a class string. When value is a map, the mapper is called for each breakpoint entry and the result is prefixed with the breakpoint name.

Returns a list suitable for inclusion in a cn/1 call.

responsive_classes(bp_map, mapper)

@spec responsive_classes(map(), (any() -> String.t() | nil)) :: [String.t() | nil]

Converts a responsive breakpoint map into a list of prefixed Tailwind classes.

Examples

iex> PhiaUi.ResponsiveHelpers.responsive_classes(%{base: 4, lg: 8}, &"gap-#{&1}")
["gap-4", "lg:gap-8"]