@kobalte/core/dist/chunk/ER4QFELU.jsx

Unstyled components and primitives for building accessible web apps and design systems with SolidJS.

import {
  createNumberFormatter
} from "./LR7LBJN3.jsx";
import {
  createRegisterId
} from "./JNCCF6MP.jsx";
import {
  Polymorphic
} from "./FLVHQV4A.jsx";

// src/meter/meter-fill.tsx
import { splitProps } from "solid-js";
import { combineStyle } from "@solid-primitives/props";

// src/meter/meter-context.tsx
import { createContext, useContext } from "solid-js";
var MeterContext = createContext();
function useMeterContext() {
  const context = useContext(MeterContext);
  if (context === void 0) {
    throw new Error(
      "[kobalte]: `useMeterContext` must be used within a `Meter.Root` component"
    );
  }
  return context;
}

// src/meter/meter-fill.tsx
function MeterFill(props) {
  const context = useMeterContext();
  const [local, others] = splitProps(props, ["style"]);
  return <Polymorphic
    as="div"
    style={combineStyle(
      {
        "--kb-meter-fill-width": context.meterFillWidth()
      },
      local.style
    )}
    {...context.dataset()}
    {...others}
  />;
}

// src/meter/meter-label.tsx
import { mergeDefaultProps } from "@kobalte/utils";
import {
  createEffect,
  onCleanup,
  splitProps as splitProps2
} from "solid-js";
function MeterLabel(props) {
  const context = useMeterContext();
  const mergedProps = mergeDefaultProps(
    {
      id: context.generateId("label")
    },
    props
  );
  const [local, others] = splitProps2(mergedProps, ["id"]);
  createEffect(() => onCleanup(context.registerLabelId(local.id)));
  return <Polymorphic
    as="span"
    id={local.id}
    {...context.dataset()}
    {...others}
  />;
}

// src/meter/meter-root.tsx
import { clamp, createGenerateId, mergeDefaultProps as mergeDefaultProps2 } from "@kobalte/utils";
import {
  createMemo,
  createSignal,
  createUniqueId,
  splitProps as splitProps3
} from "solid-js";
function MeterRoot(props) {
  const defaultId = `meter-${createUniqueId()}`;
  const mergedProps = mergeDefaultProps2(
    {
      id: defaultId,
      value: 0,
      minValue: 0,
      maxValue: 100,
      role: "meter",
      indeterminate: false
    },
    props
  );
  const [local, others] = splitProps3(mergedProps, [
    "value",
    "minValue",
    "maxValue",
    "getValueLabel",
    "role",
    "aria-valuetext",
    "aria-labelledby",
    "aria-valuemax",
    "aria-valuemin",
    "aria-valuenow",
    "indeterminate"
  ]);
  const [labelId, setLabelId] = createSignal();
  const defaultFormatter = createNumberFormatter(() => ({ style: "percent" }));
  const value = () => {
    return clamp(local.value, local.minValue, local.maxValue);
  };
  const valuePercent = () => {
    return (value() - local.minValue) / (local.maxValue - local.minValue);
  };
  const valueLabel = () => {
    if (local.indeterminate) {
      return void 0;
    }
    if (local.getValueLabel) {
      return local.getValueLabel({
        value: value(),
        min: local.minValue,
        max: local.maxValue
      });
    }
    return defaultFormatter().format(valuePercent());
  };
  const meterFillWidth = () => {
    return `${valuePercent() * 100}%`;
  };
  const dataset = createMemo(() => {
    return {};
  });
  const context = {
    dataset,
    value,
    valuePercent,
    valueLabel,
    labelId,
    meterFillWidth,
    generateId: createGenerateId(() => others.id),
    registerLabelId: createRegisterId(setLabelId)
  };
  return <MeterContext.Provider value={context}><Polymorphic
    as="div"
    role={local.role || "meter"}
    aria-valuenow={local.indeterminate ? void 0 : value()}
    aria-valuemin={local.minValue}
    aria-valuemax={local.maxValue}
    aria-valuetext={valueLabel()}
    aria-labelledby={labelId()}
    {...dataset()}
    {...others}
  /></MeterContext.Provider>;
}

// src/meter/meter-track.tsx
function MeterTrack(props) {
  const context = useMeterContext();
  return <Polymorphic
    as="div"
    {...context.dataset()}
    {...props}
  />;
}

// src/meter/meter-value-label.tsx
function MeterValueLabel(props) {
  const context = useMeterContext();
  return <Polymorphic
    as="div"
    {...context.dataset()}
    {...props}
  >{context.valueLabel()}</Polymorphic>;
}

// src/meter/index.tsx
var Meter = Object.assign(MeterRoot, {
  Fill: MeterFill,
  Label: MeterLabel,
  Track: MeterTrack,
  ValueLabel: MeterValueLabel
});

export {
  useMeterContext,
  MeterFill,
  MeterLabel,
  MeterRoot,
  MeterTrack,
  MeterValueLabel,
  Meter
};