vueless 0.0.673 → 0.0.674

package/constants.js

@@ -119,6 +119,7 @@ export const COMPONENTS = {
   UFiles: "ui.text-files",
   UEmpty: "ui.text-empty",
   UBadge: "ui.text-badge",
+  UNumber: "ui.text-number",
 
   /* Containers */
   UDivider: "ui.container-divider",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.673",
+  "version": "0.0.674",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/types.ts

@@ -6,6 +6,7 @@ import UFilesDefaultConfig from "./ui.text-files/config.ts";
 import UMoneyDefaultConfig from "./ui.text-money/config.ts";
 import UHeaderDefaultConfig from "./ui.text-header/config.ts";
 import UNotifyDefaultConfig from "./ui.text-notify/config.ts";
+import UNumberDefaultConfig from "./ui.text-number/config.ts";
 import UDotDefaultConfig from "./ui.other-dot/config.ts";
 import UButtonDefaultConfig from "./ui.button/config.ts";
 import ULinkDefaultConfig from "./ui.button-link/config.ts";
@@ -194,6 +195,7 @@ export interface Components {
   UMoney: Partial<typeof UMoneyDefaultConfig>;
   UHeader: Partial<typeof UHeaderDefaultConfig>;
   UNotify: Partial<typeof UNotifyDefaultConfig>;
+  UNumber: Partial<typeof UNumberDefaultConfig>;
   UDot: Partial<typeof UDotDefaultConfig>;
   UButton: Partial<typeof UButtonDefaultConfig>;
   ULink: Partial<typeof ULinkDefaultConfig>;

package/ui.text-badge/storybook/stories.ts

@@ -19,7 +19,7 @@ interface UBadgeArgs extends Props {
 }
 
 export default {
-  id: "4090",
+  id: "4095",
   title: "Text & Content / Badge",
   component: UBadge,
   args: {

package/ui.text-empty/storybook/stories.ts

@@ -19,7 +19,7 @@ interface UEmptyArgs extends Props {
 }
 
 export default {
-  id: "4080",
+  id: "4090",
   title: "Text & Content / Empty",
   component: UEmpty,
   args: {

package/ui.text-file/storybook/stories.ts

@@ -15,7 +15,7 @@ interface UFileArgs extends Props {
 }
 
 export default {
-  id: "4050",
+  id: "4070",
   title: "Text & Content / File",
   component: UFile,
   args: {

package/ui.text-files/storybook/stories.ts

@@ -15,7 +15,7 @@ interface UFilesArgs extends Props {
 }
 
 export default {
-  id: "4060",
+  id: "4080",
   title: "Text & Content / Files",
   component: UFiles,
   args: {

package/ui.text-money/UMoney.vue

@@ -3,11 +3,11 @@ import { computed } from "vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
-import { hasSlotContent } from "../utils/helper.ts";
 
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
-import { separatedMoney, MONEY_SIGN_TYPE, MATH_SIGN } from "./utilMoney.ts";
+
+import UNumber from "../ui.text-number/UNumber.vue";
 
 import type { Props, Config } from "./types.ts";
 
@@ -24,81 +24,37 @@ const currencySymbolPosition = computed(() => {
   };
 });
 
-const currencySpace = computed(() => {
-  return props.symbolDivided ? " " : "";
-});
-
-const mathSign = computed(() => {
-  let type = "";
-
-  if (props.sign === MONEY_SIGN_TYPE.unsigned) type = "";
-  if (props.sign === MONEY_SIGN_TYPE.positive) type = MATH_SIGN.PLUS;
-  if (props.sign === MONEY_SIGN_TYPE.negative) type = MATH_SIGN.MINUS;
-  if (props.sign === MONEY_SIGN_TYPE.auto && props.value < 0) type = MATH_SIGN.MINUS;
-
-  return type;
-});
-
-const preparedMoney = computed(() => {
-  return separatedMoney(
-    Math.abs(props.value || 0),
-    props.minFractionDigits,
-    props.maxFractionDigits,
-    props.decimalSeparator,
-    props.thousandsSeparator,
-  );
-});
-
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const {
-  moneyAttrs,
-  sumAttrs,
-  mathSignAttrs,
-  integerAttrs,
-  pennyAttrs,
-  slotLeftAttrs,
-  symbolAttrs,
-  slotRightAttrs,
-} = useUI<Config>(defaultConfig);
+const { moneyNumberAttrs, symbolAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <div v-bind="moneyAttrs">
-    <div v-if="hasSlotContent($slots['left'])" v-bind="slotLeftAttrs">
+  <UNumber
+    :value="value"
+    :size="size"
+    :color="color"
+    :sign="sign"
+    :align="align"
+    :min-fraction-digits="minFractionDigits"
+    :max-fraction-digits="maxFractionDigits"
+    :decimal-separator="decimalSeparator"
+    :thousands-separator="thousandsSeparator"
+    v-bind="moneyNumberAttrs"
+    :data-test="dataTest"
+  >
+    <template #left>
       <!-- @slot Use it to add something before money amount. -->
       <slot name="left" />
-    </div>
-
-    <div v-bind="sumAttrs" :data-test="dataTest">
-      <span
-        v-if="currencySymbolPosition.left && symbol"
-        v-bind="symbolAttrs"
-        v-text="symbol + currencySpace"
-      />
-
-      <span v-if="value" v-bind="mathSignAttrs" v-text="mathSign" />
-
-      <span v-bind="integerAttrs" v-text="preparedMoney.integer" />
-
-      <span
-        v-if="maxFractionDigits > 0"
-        v-bind="pennyAttrs"
-        v-text="preparedMoney.decimalSeparator + preparedMoney.penny"
-      />
-
-      <span
-        v-if="currencySymbolPosition.right && symbol"
-        v-bind="symbolAttrs"
-        v-text="currencySpace + symbol"
-      />
-    </div>
+      <span v-if="currencySymbolPosition.left && symbol" v-bind="symbolAttrs" v-text="symbol" />
+    </template>
 
-    <div v-if="hasSlotContent($slots['right'])" v-bind="slotRightAttrs">
+    <template #right>
+      <span v-if="currencySymbolPosition.right && symbol" v-bind="symbolAttrs" v-text="symbol" />
       <!-- @slot Use it to add something after money amount. -->
       <slot name="right" />
-    </div>
-  </div>
+    </template>
+  </UNumber>
 </template>

package/ui.text-money/config.ts

@@ -1,20 +1,14 @@
 export default /*tw*/ {
-  money: {
-    base: "whitespace-nowrap flex items-center text-{color}-600",
+  moneyNumber: {
+    base: "{UNumber}",
     variants: {
-      color: {
-        white: "text-white",
-        grayscale: "text-gray-900",
-      },
-      align: {
-        left: "justify-start",
-        right: "justify-end",
+      planned: {
+        true: "opacity-75 before:content-['('] after:content-[')']",
       },
     },
   },
-  slotLeft: "mr-2",
-  slotRight: "ml-2",
-  sum: {
+  symbol: {
+    base: "text-{color}-600 mx-1",
     variants: {
       size: {
         xs: "text-xs",
@@ -26,27 +20,13 @@ export default /*tw*/ {
         "3xl": "text-3xl",
         "4xl": "text-4xl",
       },
-      planned: {
-        true: "opacity-75 before:content-['('] after:content-[')']",
-      },
-    },
-  },
-  symbol: "",
-  mathSign: "",
-  integer: "",
-  penny: {
-    variants: {
-      size: {
-        xs: "text-2xs",
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
-        xl: "text-lg",
-        "2xl": "text-xl",
-        "3xl": "text-2xl",
-        "4xl": "text-3xl",
-      },
     },
+    compoundVariants: [
+      { symbolDivided: false, symbolAlign: "left", class: "mr-0" },
+      { symbolDivided: false, symbolAlign: "right", class: "ml-0" },
+      { planned: true, symbolAlign: "left", class: "ml-0" },
+      { planned: true, symbolAlign: "right", class: "mr-0" },
+    ],
   },
   defaults: {
     color: "grayscale",

package/ui.text-money/storybook/stories.ts

@@ -8,6 +8,9 @@ import {
 import UMoney from "../../ui.text-money/UMoney.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UText from "../../ui.text-block/UText.vue";
+import UDivider from "../../ui.container-divider/UDivider.vue";
+
 import DebitIcon from "../../ui.text-money/assets/debit.svg?component";
 import CreditIcon from "../../ui.text-money/assets/credit.svg?component";
 
@@ -16,17 +19,15 @@ import type { Props } from "../types.ts";
 
 interface UMoneyArgs extends Props {
   slotTemplate?: string;
-  enum: "color" | "size" | "sign" | "symbolAlign" | "align";
+  enum: "color" | "size" | "sign" | "symbolAlign";
 }
 
-const COMPONENT_CLASSES = "flex justify-center w-1/6";
-
 export default {
-  id: "4040",
+  id: "4060",
   title: "Text & Content / Money",
   component: UMoney,
   args: {
-    value: 10,
+    value: -14.24,
     symbol: "$",
     sign: "auto",
   },
@@ -45,24 +46,17 @@ const DefaultTemplate: StoryFn<UMoneyArgs> = (args: UMoneyArgs) => ({
   setup() {
     const slots = getSlotNames(UMoney.__name);
 
-    const icons = {
-      Debit: DebitIcon,
-      Credit: CreditIcon,
-    };
-
-    return { args, slots, icons };
+    return { args, slots };
   },
   template: `
-    <div class="${COMPONENT_CLASSES}">
-      <UMoney v-bind="args">
-        ${args.slotTemplate || getSlotsFragment("")}
-      </UMoney>
-    </div>
+    <UMoney v-bind="args">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UMoney>
   `,
 });
 
 const EnumVariantTemplate: StoryFn<UMoneyArgs> = (args: UMoneyArgs, { argTypes }) => ({
-  components: { UMoney, URow },
+  components: { UMoney, URow, UText, UDivider },
   setup() {
     const slots = getSlotNames(UMoney.__name);
 
@@ -74,29 +68,26 @@ const EnumVariantTemplate: StoryFn<UMoneyArgs> = (args: UMoneyArgs, { argTypes }
   },
   template: `
     <URow>
-      <div class="${COMPONENT_CLASSES}" v-for="(option, index) in options" :key="index">
-        <UMoney v-bind="args" :[args.enum]="option" />
-      </div>
+      <UMoney
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        :[args.enum]="option"
+      >
+        <template #right v-if="args.enum === 'sign'">
+          <UText size="lg" class="ml-1">{{ option }}</UText>
+          <UDivider vertical variant="dark" class="h-5" />
+        </template>
+      </UMoney>
     </URow>
   `,
-  created() {
-    this.mxArgTypes = argTypes;
-  },
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const OtherValues = DefaultTemplate.bind({});
-OtherValues.args = { value: 10, symbol: "$", sign: "negative" };
-
 export const Colors = EnumVariantTemplate.bind({});
-Colors.args = {
-  enum: "color",
-  value: 0,
-  symbol: "$",
-  sign: "auto",
-};
+Colors.args = { enum: "color" };
 
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
@@ -110,26 +101,32 @@ SymbolAlign.args = { enum: "symbolAlign" };
 export const Planned = DefaultTemplate.bind({});
 Planned.args = { planned: true };
 
-export const MinFractionDigits3 = DefaultTemplate.bind({});
-MinFractionDigits3.args = { value: 25.67, minFractionDigits: 3, maxFractionDigits: 3 };
+export const MinFractionDigits4 = DefaultTemplate.bind({});
+MinFractionDigits4.args = { minFractionDigits: 4, maxFractionDigits: 4 };
+
+export const Slots: StoryFn<UMoneyArgs> = (args) => ({
+  components: { UMoney, UIcon, URow },
+  setup() {
+    const icons = {
+      Debit: DebitIcon,
+      Credit: CreditIcon,
+    };
 
-export const Align = EnumVariantTemplate.bind({});
-Align.args = { enum: "align" };
+    return { args, icons };
+  },
+  template: `
+    <URow>
+      <UMoney v-bind="args">
+        <template #left>
+          <UIcon :src="icons.Debit" size="3xs" />
+        </template>
+      </UMoney>
 
-export const SlotLeft = DefaultTemplate.bind({});
-SlotLeft.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon :src="icons.Debit" size="3xs" />
-    </template>
-  `,
-};
-
-export const SlotRight = DefaultTemplate.bind({});
-SlotRight.args = {
-  slotTemplate: `
-    <template #right>
-      <UIcon :src="icons.Credit" size="3xs" />
-    </template>
+      <UMoney v-bind="args">
+        <template #right>
+          <UIcon :src="icons.Credit" size="3xs" />
+        </template>
+      </UMoney>
+    </URow>
   `,
-};
+});

package/ui.text-money/types.ts

@@ -7,7 +7,7 @@ export interface Props {
   /**
    * Money value.
    */
-  value?: number;
+  value?: number | string;
 
   /**
    * Money size.

package/ui.text-notify/storybook/stories.ts

@@ -20,7 +20,7 @@ interface UNotifyArgs extends Props {
 }
 
 export default {
-  id: "4035",
+  id: "4040",
   title: "Text & Content / Notify",
   component: UNotify,
   argTypes: {

package/ui.text-number/UNumber.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+
+import { COMPONENT_NAME } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import { separatedNumber, MATH_SIGN_TYPE, MATH_SIGN } from "./utilNumber.ts";
+
+import type { Props, Config } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+});
+
+const numericValue = computed(() => {
+  if (typeof props.value === "string") {
+    return parseFloat(props.value);
+  }
+
+  return props.value;
+});
+
+const mathSign = computed(() => {
+  let type = "";
+
+  if (props.sign === MATH_SIGN_TYPE.unsigned) type = "";
+  if (props.sign === MATH_SIGN_TYPE.positive) type = MATH_SIGN.PLUS;
+  if (props.sign === MATH_SIGN_TYPE.negative) type = MATH_SIGN.MINUS;
+  if (props.sign === MATH_SIGN_TYPE.auto && numericValue.value < 0) type = MATH_SIGN.MINUS;
+
+  return type;
+});
+
+const preparedNumber = computed(() => {
+  return separatedNumber(
+    Math.abs(numericValue.value || 0),
+    props.minFractionDigits,
+    props.maxFractionDigits,
+    props.decimalSeparator,
+    props.thousandsSeparator,
+  );
+});
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { numberAttrs, sumAttrs, mathSignAttrs, integerAttrs, decimalAttrs } =
+  useUI<Config>(defaultConfig);
+</script>
+
+<template>
+  <div v-bind="numberAttrs">
+    <!-- @slot Use it to add something before the number. -->
+    <slot name="left" />
+
+    <div v-bind="sumAttrs" :data-test="dataTest">
+      <span v-if="value" v-bind="mathSignAttrs" v-text="mathSign" />
+
+      <span v-bind="integerAttrs" v-text="preparedNumber.integer" />
+
+      <span
+        v-if="maxFractionDigits > 0"
+        v-bind="decimalAttrs"
+        v-text="preparedNumber.decimalSeparator + preparedNumber.decimal"
+      />
+    </div>
+
+    <!-- @slot Use it to add something after the number. -->
+    <slot name="right" />
+  </div>
+</template>

package/ui.text-number/config.ts

@@ -0,0 +1,42 @@
+export default /*tw*/ {
+  number: {
+    base: "whitespace-nowrap flex items-center text-{color}-600",
+    variants: {
+      color: {
+        white: "text-white",
+        grayscale: "text-gray-900",
+      },
+      align: {
+        left: "justify-start",
+        right: "justify-end",
+      },
+    },
+  },
+  sum: {
+    variants: {
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+        "3xl": "text-3xl",
+        "4xl": "text-4xl",
+      },
+    },
+  },
+  mathSign: "",
+  integer: "",
+  decimal: "",
+  defaults: {
+    color: "grayscale",
+    size: "md",
+    sign: "auto",
+    align: "left",
+    minFractionDigits: 0,
+    maxFractionDigits: 2,
+    decimalSeparator: ",",
+    thousandsSeparator: " ",
+  },
+};

package/ui.text-number/constants.ts

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const COMPONENT_NAME = "UNumber";

package/ui.text-number/storybook/docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/storybook.ts";
+
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.text-number/storybook/stories.ts

@@ -0,0 +1,105 @@
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
+
+import UNumber from "../../ui.text-number/UNumber.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UText from "../../ui.text-block/UText.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+import UDivider from "../../ui.container-divider/UDivider.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { Props } from "../types.ts";
+
+interface UNumberArgs extends Props {
+  slotTemplate?: string;
+  enum: "color" | "size" | "sign";
+}
+
+export default {
+  id: "4050",
+  title: "Text & Content / Number",
+  component: UNumber,
+  args: {
+    value: -14.24,
+    sign: "auto",
+  },
+  argTypes: {
+    ...getArgTypes(UNumber.__name),
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<UNumberArgs> = (args: UNumberArgs) => ({
+  components: { UNumber, UIcon, UBadge },
+  setup() {
+    const slots = getSlotNames(UNumber.__name);
+
+    return { args, slots };
+  },
+  template: `
+    <UNumber v-bind="args">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UNumber>
+  `,
+});
+
+const EnumVariantTemplate: StoryFn<UNumberArgs> = (args: UNumberArgs, { argTypes }) => ({
+  components: { UNumber, URow, UText, UDivider },
+  setup() {
+    return { args, options: argTypes?.[args.enum]?.options };
+  },
+  template: `
+    <URow>
+      <UNumber
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        :[args.enum]="option"
+      >
+        <template #right v-if="args.enum === 'sign'">
+          <UText size="lg" class="ml-1">{{ option }}</UText>
+          <UDivider vertical variant="dark" class="h-5" />
+        </template>
+      </UNumber>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Colors = EnumVariantTemplate.bind({});
+Colors.args = {
+  enum: "color",
+  sign: "auto",
+};
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
+
+export const Sign = EnumVariantTemplate.bind({});
+Sign.args = { enum: "sign" };
+
+export const MinFractionDigits4 = DefaultTemplate.bind({});
+MinFractionDigits4.args = { minFractionDigits: 4, maxFractionDigits: 4 };
+
+export const Slots: StoryFn<UNumberArgs> = (args) => ({
+  components: { UNumber, UIcon, URow, UBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow>
+      <UNumber v-bind="args">
+        <template #left>
+          <UIcon name="confirmation_number" color="green" />
+        </template>
+      </UNumber>
+
+      <UNumber v-bind="args">
+        <template #right>
+          <UBadge label="Quantity" color="green" />
+        </template>
+      </UNumber>
+    </URow>
+  `,
+});

package/ui.text-number/types.ts

@@ -0,0 +1,82 @@
+import defaultConfig from "./config.ts";
+import type { ComponentConfig } from "../types.ts";
+
+export type Config = typeof defaultConfig;
+
+export interface Props {
+  /**
+   * Number value.
+   */
+  value?: number | string;
+
+  /**
+   * Number size.
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+
+  /**
+   * Number color.
+   */
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "white"
+    | "brand";
+
+  /**
+   * Number sign.
+   */
+  sign?: "auto" | "positive" | "negative" | "unsigned";
+
+  /**
+   * Minimal number of signs after the decimal separator (fractional part of a number).
+   */
+  minFractionDigits?: number;
+
+  /**
+   * Maximal number of signs after the decimal separator (fractional part of a number).
+   */
+  maxFractionDigits?: number;
+
+  /**
+   * A symbol used to separate the integer part from the fractional part of a number.
+   */
+  decimalSeparator?: string;
+
+  /**
+   *  A symbol used to separate the thousand parts of a number.
+   */
+  thousandsSeparator?: string;
+
+  /**
+   * Number align.
+   */
+  align?: "right" | "left";
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/{ui.text-money/utilMoney.ts → ui.text-number/utilNumber.ts}

@@ -1,4 +1,4 @@
-export const MONEY_SIGN_TYPE = {
+export const MATH_SIGN_TYPE = {
   auto: "auto",
   positive: "positive",
   negative: "negative",
@@ -10,12 +10,11 @@ export const MATH_SIGN = {
   MINUS: "-",
 };
 
-export const ADD_SPACE_IN_MONEY_REG_EX = /(\d)(?=(\d{3})+(\D|$))/g;
 export const SINGLE_ZERO = "0";
 export const DOUBLE_ZERO = "00";
 
-export function separatedMoney(
-  money: number,
+export function separatedNumber(
+  value: number,
   minFractionDigits = 0,
   maxFractionDigits = 2,
   decimalSeparator = ",",
@@ -26,28 +25,28 @@ export function separatedMoney(
     maximumFractionDigits: Number(maxFractionDigits),
   };
 
-  const formattedMoney =
-    money !== undefined && money !== null ? Number(money).toLocaleString("en-US", options) : "0";
+  const formattedNumber =
+    value !== undefined && value !== null ? Number(value).toLocaleString("en-US", options) : "0";
 
-  let [integer, penny = ""] = formattedMoney.split(".");
+  let [integer, decimal = ""] = formattedNumber.split(".");
 
   integer = integer.replace(/,/g, thousandsSeparator);
 
-  if (!money && money !== 0) {
+  if (!value && value !== 0) {
     integer = SINGLE_ZERO;
-    penny = DOUBLE_ZERO;
+    decimal = DOUBLE_ZERO;
   }
 
-  if (penny === "") {
+  if (decimal === "") {
     decimalSeparator = "";
   }
 
   if (minFractionDigits === 0 && maxFractionDigits === 0) {
     decimalSeparator = "";
-    penny = "";
-  } else if (penny.length < minFractionDigits) {
-    penny = penny.padEnd(minFractionDigits, "0");
+    decimal = "";
+  } else if (decimal.length < minFractionDigits) {
+    decimal = decimal.padEnd(minFractionDigits, "0");
   }
 
-  return { integer, penny, decimalSeparator };
+  return { integer, decimal, decimalSeparator };
 }